0. Javascript

• 웹 페이지에서 다양한 기능을 구현하는 스크립트 언어
• 정적인 정보만 보여주던 웹 페이지를 데이터가 주기적으로 갱신되거나(AJAX), 사용자와 상호작용을 하거나 애니메이션 등이 동작되게 하는 것을 가능하게 한다.
• 스크립트 언어 : 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어

1. DOM

• Document Object Model : 문서 객체 모델
• Browser API : 웹 브라우저에 내장된 API로 웹 브라우저가 현재 컴퓨터 환경에 대한 데이터를 제공하거나 오디오를 재생하는 등 여러가지 유용하고 복잡한 일을 수행한다.
• 우리는 Browser API 중 하나인 DOM을 배운다.
• 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM구조에 접근할 수 있는 방법을 제공한다.
  • 문서 구조, 스타일, 내용 등을 변경
  • HTML 컨텐츠를 추가, 제거, 변경하고 동적으로 페이지에 스타일을 추가하는 등 HTML/CSS를 조작할 수 있다.
• 문서가 구조화 되어 있으며 각 요소는 객체(object)로 취급한다.
• 단순한 속성 접근, 메서드 활용 뿐만 아니라 프로그래밍 언어적 특성을 활용한 조작 가능
• DOM은 문서를 논리 트리로 표현하며, DOM 메서드를 사용하면 프로그래밍적으로 트리에 접근할 수 있고 이를 통해 문서의 구조, 스타일, 컨텐츠를 변경할 수 있다.
• DOM은 웹페이지의 객체 지향 표현이며, JavaScript와 같은 스크립트 언어를 이용해 DOM을 수정할 수 있음.

(1) DOM의 주요 객체

① window

• DOM을 표현하는 창으로 가장 최상위 객체이다.
• 탭 기능이 있는 브라우저에서는 각각의 탭을 각각의 window 객체로 나타낸다.

② document

• 브라우저가 불러온 웹 페이지
• 페이지 컨텐츠의 진입점 역할을 하며, body등과 같은 수많은 다른 요소들을 포함한다.

③ 그 외에도 navigator, lacation, history, screen 등이 있다.

2. DOM 조작

• 선택(Select) -> 조작(Manipulation)

(1) 선택 관련 메서드

Method	설명
document.querySelector(selector)	제공한 선택자와 일치하는 element 한 개 선택 제공한 CSS selector를 만족하는 첫 번째 element 객체를 반환(없다면 null 반환)
document.querySelectorAll(selector)	제공한 선택자와 일치하는 여러 element를 선택 매칭할 하나 이상의 selector를 포함하는 유효한 CSS selector를 인자(문자열)로 받음 제공한 CSS selector를 만족하는 NodeList를 반환

NodeList

• index로만 각 항목에 접근 가능
• 배열의 forEach 메서드 및 다양한 배열 메서드 사용 가능
• querySelectorAll()에 의해 반환되는 NodeList는 DOM의 변경사항을 실시간으로 반영하지 않는다.

(2) 조작 관련 메서드
방송에 나온 2번 파일 채워넣어야댐

2. EVENT

• Event란 프로그래밍 하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)이다.
• 우리가 원한다면 어떤한 방식으로 응답할 수 있도록 시스템이 말해주는 것이다.
• 웹페이지 버튼을 클릭한다면 클릭이라는 사건에 대한 결과를 응답받기를 원할 수 있다.
• 클릭 외에도 키보드 키 입력, 브라우저 닫기, 데이터 제출, 텍스트 복사 등 각양각색의 event가 존재한다.

Event object

• 네트워크 활동이나 사용자와의 상호작용 같은 사건의 발생을 알리기 위한 객체
• Event 발생은 마우스를 클릭하거나 키보도드를 누르는 사용자 행동으로 발생하거나 특정 메서드를 호출하여 프로그래밍 적으로 만들어 낼 수 있다.
• DOM 요소는 Event를 받고(수신)
• 받은 이벤트를 addEventListener()라는 Event처리기를 사용해 다양한 html요소에 (부착)하여 (처리)하게 된다.

Event handler - addEventListener()

EventTarget.addEventListener(type, listener)

3. THIS

• 어떠한 object를 가리키는 키워드(java에서의 this와 python에서의 self는 인스턴스 자기자신을 가리킨다)
• JavaScript에서는 함수를 선언할 때 this에 객체가 결정되는게 아닌 함수를 호출할 때 어떻게 호출 되었는지에 따라 동적으로 결정된다.

전역 문맥에서의 this
함수 문맥에서의 this
단순 호출 : 전역 객체를 가리킨다.
Method : 객체의 method이므로 해당 객체가 반인딩된다.
Nested :
(funtion) 단순 호출이므로 두번째 console.log(this)에서는 myobj를 가리키지 못하고 window를 가리킨다.
(화살표) 위의 상황을 해결하기 위해 등장
화살표 함수에서의 this는 자신을 감싼 정적 범위를 의미하므로 자동으로 한단계 상위(myobj)를 바인딩한다.
= 화살표 함수는 호출의 위치와 상관없이 상위 스코프를 가리킨다.

this가 호출되는 순간에 결정되는 건 장단이 있따.
장점 함수(메서드)를 하나만 만들어서 여러 객체에서 재사용 가능하다.
단점 장점에서 오는 유연함이 실수를 만든다.