#1 자바스크립트 기초

Console 객체

아무 전역 객체에서나 접근 가능

var, let, const

• 함수 선언문 호이스팅 : 올바른 출력

• 변수 생성시,

  • 재할당 필요 X ⇒ const 사용

  • 재할당 필요 O ⇒ scope를 최대한 좁게 만들어 let 사용

자바스크립트 타입

원시 타입 : 고정된 크기로 Call Stack 메모리에 저장, 실제 데이터가 변수에 할당

참조 타입 : 데이터 크기가 정해지지 X, Call Stack 메모리에 저장, 데이터의 값이 heap에 저장되며 변수에 heap 메모리의 주소값이 할당

• 원시 타입과 참조 타입으로 나뉨, JS는 동적 타입이다.

자바스크립트 타입 변환

1. JS 함수 사용

   ex) String(2) ⇒ ‘2’, 2.toString() ⇒ ‘2’

2. JS 자체에 의해 자동으로

   ex) string + number = string

자바스크립트 연산 및 Math Object

• +, -, *, /, %

• Math Object

Template literals

backtick(`)을 사용해 문자열 표현

1. 줄 바꿈 쉽게 가능

2. 문자열 내부에 표현식 포함 가능

Loops

for

for/in

주로 객체를 순회할 때 사용

for/of

iterable(반복 가능한) 객체의 요소들을 순회할 때 사용

while

do/while

코드 한번 실행 후 조건문을 통과

for, forEach, map

forEach ⇒ break X

#2 Window 객체, DOM

Window Object

브라우저의 객체

1. 브라우저 창 정보 알 수 있고, 창 제어 가능

2. var 키워드로 변수 선언 or 함수 선언 시 window 객체의 프로퍼티가 됨

DOM이란?

Document Object Model

메모리에 웹 페이지 문서 구조를 트리구조로 표현해서 웹 페이지가 HTML 페이지를 인식하게 해줌

CRP(Critical Rendering Path)? 웹 페이지 빌드 과정

Document Object 사용해보기

window 객체 ⇒ 브라우저 창

document 객체 ⇒ 브라우저 내에서 콘텐츠를 보여주는 웹 페이지 자체

// 하나의 요소에 접근
document.getElementById('요소아이디')
// 파라미터로 전달한 ID를 가진 태그를 반환
document.getElementsByName('name속성값')
// 파라미터로 전달한 name 속성을 가진 태그를 반환
document.querySelector('선택자')
// 파라미터로 전달한 선택자에 맞는 첫 번째 태그를 반환

// 여러 요소에 접근
document.getElementsByTagName('태그이름')
// 파라미터로 전달한 태그이름을 가진 모든 태그들을 반환(배열)

document.getElementsByClassName('클래스이름')
// 파라미터로 전달한 클래스 이름을 가진 모든 태그들을 반환(배열)

document.querySelectorAll('선택자')
// 파라미터로 전달한 선택지에 맞는 모든 태그들을 반환(배열)

innerHTML : html까지 포함

innerText : 사용자에게 보여지는 텍스트, 여러 공백을 무시하고 하나의 공백만 처리

textContent: (display:none)이 적용된 텍스트도 보여줌

DOM 탐색하기

1. 자식 노드 탐색하기 (childNodes, firstChild, lastChild)

val = list.childNodes : line-break(text)도 나타남

배열같아 보이지만, 배열 아님

배열로 표현 ⇒ Array.from(list.childNodes)

// nodeType
// 1 : Element
// 2 : Attribute (deprecated)
// 3 : Text node
// 8 : Comment
// 9 : Document itself
// 10 : Doctype

val = list.firstChild : list.firstChild === list.childNodes[0]

val = list.firstElementChild : textNode 포함 X

CreateElement

document.createElement('태그이름')

document.querySelector('상위 태그').appendChild('새로만든 태그')

removeChild & replaceChild

parentNode.removeChild(node) : 삭제

parentNode.replaceChild(newChild, oldChild) : 교체

#3 Event

Event Listener & Event 객체

Event Listener : 이벤트 발생 시 호출하는 함수

1. 자바스크립트 코드에 프로퍼티로 등록

2. HTML 태그에 속성으로 등록

3. addEventListener 메소드를 사용

Event 종류

1. UI 이벤트

   • load, change, resize, scroll, error

2. 키보드 이벤트

   • keydown, keyup, keypress

3. 마우스 이벤트

   • click, dblclick, mousedown, mouseout, mouseover, mousemove, mouseup

4. 포커스 이벤트

   • focus, blur

5. 폼 이벤트

   • input / textarea, change, select, reset, submit, cut/copy/paste

Event Bubbling

아래에서 위로 이벤트 전달

event.stopPropagation() : 버블링 중단

event.target : 실제 이벤트 타깃 요소

this(event.currentTarget) : ‘현재’ 요소로, 현재 실행 중인 핸들러가 할당된 요소

Event Capturing

위에서 아래 요소로 이벤트가 내려오는 것

이벤트의 3단계 흐름

1. 캡처링 단계 : 이벤트가 하위 요소로 전파되는 단계

2. 타깃 단계 : 이벤트가 실제 타깃 요소에 전달되는 단계

3. 버블링 단계 : 이벤트가 상위 요소로 전파되는 단계

코드 흐름 확인

elem.addEventListener("click",(e) => alert(캡쳐링: ${elem.tagName}),true);

→ 캡처링(true!!)

elem.addEventListener("click",(e) => alert(캡쳐링: ${elem.tagName}));

→ 버블링

Event Delegation

하위 요소의 이벤트를 상위 요소에 위임하는 것

즉, 하위요소의 이벤트를 상위에서 제어