220418

JAVASCRIPT 

 

- 객체(object) 기반 스크립트 언어

- 인터프리터란?

소스 코드 -> 컴파일러(통째로 바꿈) -> 기계어 -> 실행

소스코드 -> 인터프리터(한줄씩 기계어로 변경) -> 실행

 

컴파일러 언어(C,JAVA)는 하나만 오류가 나도 통째로 에러가 나지만

인터프리터 언어(Python,SQL)는 오류가 난 줄 앞까지는 실행이 가능.

 

ES(ECMAScript) : 국제 표준 스크립트

ES5 (2009년)  -> ES6(2015) 스마트폰이 등장함으로서 많은 것이 변함

 

인라인 방식 (잘 안씀) 

- 정해진 속성 값 안에 입력

- 짧은 내용을 작성할 때 사용

- 주로 함수를 호출하는 방식을 이용

 

내부 방식 

- script 태그 내에 작성한다.

- 아무데나 넣을 수 있음

- 코드가 읽힐 때 실행되므로 위치를 어디에 두느냐가 중요함

 

외부 방식

-<script src="#"></script> 로 불러옴

-순서에 주의할것

 

디버깅 방법

-개발자 도구 -> console

-debugger

 

호이스팅?  : 변수/함수 선언만 제일 위로 끌어올려진것처럼 보이는 현상

 

var ex1 = 10;               ->    var ex1;

var ex2 = 20;                      var ex2;

                                       ex1 = 10;

                                       ex2 = 20;

 

var 는 선언되는 순간 undefined 으로 선언됨

let은 선언되어도 값이 존재하지않음. 그래서 선언 없이 변수를 먼저 쓰면 에러 발생

 

- 템플릿 리터럴 ` ` (백틱사용)

 

${} 를 중간에 넣어줌으로써 str 문장 사이에 변수를 집어넣을수있다.

`제 나이는 ${age} 입니다`

 

긴 줄을 쓰려면 \로 나눠서 쓴다.

긴 줄은 \

이렇게 쓰셔야\<- 공백 없어야함

합니다.   -> 줄바꿈이 되지는 않음.

 

- 함수

코드를 블럭화 하기위해 사용

 

if

else 부분을 통해서 기본값을 지정한다. (조건이 실행되지 않았을경우를 고려)

 

continue; -> continue가 나오는 순간 다음 반복 (증가/감소)로 넘어감

break; -> break가 나오는 순간 반복문을 종료

 

 

- event

 

target.onclick <- 변수

 

target.addEventListerner() <- 함수라서 중복사용가능

 

이벤트 따로 공부해보기

 

bubbling

 

이벤트가 하위 계층에서 상위 계층으로 전파되는 현상

 

이벤트가 중복 실행될때 캡쳐링, 버블링을 의심할수있다.

 

DOM = Document Object Model -> html 구조를 도식화 한것.

 

DOM 요소 접근

 

document.getElementById()  -> Element's' 아님 / 나머지는 다 s 붙음

-> document(전체)에서 id로 찾는다. 

 

querySelector() -> 제일 처음 나타나는 1개 요소만 찾음

querySelectorAll() -> 모든 요소 다 찾음

 

DOM 요소 생성

 

let newElem = document.createElement("div"); -> div 요소를 만듬

let newText = document.createTextNode("안녕하세요?") text 노드를 만듬

 

newElem.appendChild(newText); 자식 노드로 텍스트 노드를 추가.

 

let ex1 = document.getElementById("ex1");

ex1.appendChild(newElem); ex1 요소 아래 새 div를 삽입

 

<=> removeChild

 

console.log(ex1.innerText); -> ex1 태그의 Text를 가져와서 출력한다

ex1.innerHTML -> ex1태그 하위의 HTML을 가져온다