일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 인프런
- intellij
- react오류
- Concurrently
- 모두의 파이썬
- 웹 게임을 만들며 배우는 리액트
- react
- DB Browser
- intllij 내 Bean을 찾지 못해서 발생하는 오류
- 모던자바스크립트
- ReactDOM.render is no longer supported in React 18. Use createRoot instead
- 따라하며 배우는 노드 리액트 기본 강의
- You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client"
- 노드에 리액트 추가하기
- spring-boot
- 리액트
- node.js 설치
- Spring-Framework
- vs code 내 node
- 타자 게임 만들기
- 자바스크립트
- 거북이 대포 게임
- Python
- JS 개념
- Colaboratory 글자 깨짐
- Do it 자바스크립트 + 제이쿼리 입문
- props
- googleColaboratory
- 계산맞추기 게임
- node.js로 로그인하기
- Today
- Total
프로그래밍 삽질 중
[Do it 자바스크립트 + 제이쿼리 입문] 기초 문법(02) + 함수(05) 개념 본문
[Do it 자바스크립트 + 제이쿼리 입문] 기초 문법(02) + 함수(05) 개념
평부 2021. 10. 1. 23:32* 모든 파일은 html로 작성
* html 파일의 <script></script>안에 javascript가 작성됨
* 모든 코드의 출처(책 이름 : [Do it 자바스크립트 + 제이쿼리 입문]) : https://edu.goorm.io/lecture/12563/%EC%A0%80%EC%9E%90-%EC%A7%81%EA%B0%95-%EB%B0%94%EB%A1%9C-%EC%8B%A4%ED%96%89-do-it-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-%EC%9E%85%EB%AC%B8
* 현재 공부중인 자바스크립트 + 제이쿼리 코드 : https://github.com/0131ryu/Javascript_book
[02. 자바스크립트 기초 문법]
document.write("hello");
- document는 문서 객체이며, 문서 출력 메서드인 write()를 이용해 데이터를 문서에 출력
<script src="js 파일 경로"></script>
- 내부 스크립트를 외부로 분리, 프로젝트 관리를 원활하게 하기 위함
변수
- 변하는 데이터(값)을 저장할 수 있는 메모리 공간, 데이터를 담을 수 있는 그릇이며, 오직 데이터 한 개만 저장 가능
- 새로운 데이터가 들어오면 기존의 데이터는 지워짐
- 변수 선언 방법 : var AAA = 0;
연산자
- 산술(+,-,*,/), 문자 결합(+로 주로 연결), 대입연산자(+=, -=, *=, /=), 증감연산자(++, --), 비교연산자(>, <), 논리연산자(true, false) 등 존재
- 이 중 증감 연산자는 위치가 어디에 있냐에 따라 값이 달라짐
- 예시) var num = 10;
num--;
document.write(num); //9;
++num;
document.write(num); //10
num++;
document.write(num); //11
[03. 제어문]
제어문
- 프로그램 흐름을 제어할 수 있도록 도와주는 문장
- 조건문(if/else/else if), 선택문(switch), 반복문(while, for문) 존재 *do/while은 while과 동일하게 생각할 것
- break;는 while/for문에서 조건식과 상관없이 반복문을 강제로 종료 시 사용
- continue : 반복문만 사용 가능
- for문은 중첩해서 사용 가능
if | if/else | if/else if | switch | while | for |
if(조건식) { 자바스크립트 코드; } |
if(조건식) { 자바스크립트 코드1; } else { 자바스크립트 코드2; } |
if(조건식1) { 자바스크립트 코드1; } else if(조건식2) { 자바스크립트 코드2; } |
var 변수 = 초기값; switch(변수) { case 값1; 코드1; break; case 값2; 코드2; break; defulat: 코드3; break; } |
var 변수 = 초기값; while(조건식) { 자바스크립트 코드; 증감식; } |
for(초기값, 조건식; 증감식) { 자바스크립트 코드; } |
for문 내 continue | while 내 continue |
for(초기값; 조건식; 증감식) { continue; 자바스크립트 코드; } |
var 변수 = 초기값; while(조건식) { 증감식; continue; 자바스크립트 코드; } |
[04. 객체]
객체
- 자바스크립트는 객체 기반 언어
- 객체는 기능과 속성을 가짐
객체의 기본형 |
객체.메서드(); 객체.속성; 또는 객체.속성 = 값; |
객체의 종류
- 내장객체 : 자바스크립트 엔진에 내장되어 있음, 문자(String) / 날짜(Date) / 수학(Math) 등
- 브라우저 객체 모델(BOM) : 브라우저에 계층 구조로 내장되어 있는 객체
-> window(document와 location의 객체의 상위 객체), screen, location, history, navigator 등
- 문서 객체 모델(DOM) : HTML 문서 구조
내장객체
- 변수를 이용해 참조 : 앞으로 생성된 객체를 이용 시 참조 변수를 사용하겠다는 말
- 배열객체 (ex) arr = [1, 2, 3]) 나 문자열 객체(ex) var t = "test";)등 사용 가능
내장 객체 기본형 |
참조 변수(인스턴스 이름) = new 생성 함수(); |
브라우저 객체 모델
- 브라우저에 내장된 객체 : 브라우저 객체
- window 객체의 메서드 종류 : https://homzzang.com/b/js-1139
- screen 객체의 메서드 종류 : https://webzz.tistory.com/83
- location 객체의 메서드 종류 : https://webzz.tistory.com/85
- history 객체의 메서드 종류 : https://webzz.tistory.com/84
- navigator 객체의 속성 종류 : https://webzz.tistory.com/82
[05. 함수]
함수
- 변수(데이터는 저장 가능하나 코드 저장 불가)와 달리, 함수는 코드를 메모리에 저장했다가 필요할 경우 호출해서 사용 가능
기본 함수 정의문 | 함수명이 없는 함수 | 정의된 함수 호출하는 방법 |
function 함수명() { 자바스크립트 코드; } |
참조 변수 = function() { 자바스크립트 코드; } |
함수명(); 또는 참조 변수(); |
getElementById() 메서드
- id값을 이용해 문서 객체(태그)를 선택하는 메서드
ex) id값이 "bg"인 요소의 배경색을 초록색으로 적용
document.getElementById("bg").style.backgroundColor = "green";