사진 출처        도서 구매
모던 자바스크립트 입문 | 이소 히로시 지음 | 서재원 옮김 책을 읽고 작성하였습니다.

이 책은 자바스크립트의 기본 원리와 프로그래밍 개념들을 아주 쉽게 알려주는 책입니다. 이 책 덕분에 자바스크립트 소스를 이해할 수 있게 되었고, 이를 이용하여 웹 개발도 할 수 있게 되었습니다. 강력추천합니다.

13. 웹 브라우저의 객체

• 이 장에서는 웹 브라우저에서 사용할 수 있는 호스트 객체를 배운다.
• 호스트 객체 : ECMASCRIPT로 규정된 기본 객체 외에 자바스크립트 실행 환경에 정의된 객체
• 자바스크립트 프로그램은 호스트 객체를 이용해 CSS로 스타일 제어,
  HTML문서 제어, 웹브라우저의 window객체 제어를 할 수 있다.
• 대화형(Interactive) 웹페이지를 동적(Dynamic)으로 만들 수 있다.

🔹 클라이언트 측 자바스크립트

웹브라우저에서 동작하는 자바스크립트(클라이언트 측 자바스크립트)의 전체 동작을 정리한다.

🔹 웹 브라우저에서 자바스크립트가 하는 일

1. 웹페이지의 Document객체 제어
   • HTML요소와 css스타일 작업
   • DOM API활용
2. 웹페이지의 Window객체 제어 및 브라우저 제어
   : 웹 브라우저의 내장된 다양한 객체를 활용
3. 웹 페이지에서 발생하는 이벤트 처리
   : 이벤트 처리기와 타이머
4. HTTP를 이용한 통신 제어
   : XMLHttpRequest객체를 활용한 HTTP통신

🔹 웹 브라우저에서의 자바스크립트 실행순서

• 렌더링 엔진 : 웹 브라우저에서 HTML문서를 분석하고 표시하는 프로그램
• 렌더링 엔진은 다음 과정을 거쳐 HTML문서의 구문을 분석하고 DOM트리를 구축한 후에 HTML안에 저장된 자바스크립트 코드를 실행한다.

1. 웹 브라우저로 웹 페이지를 열면 가장 먼저 window객체가 생성된다.
   Window객체는 웹페이지의 전역 객체로 웹 페이지와 탭마다 생성된다.
2. Document객체가 Window객체의 프로퍼티로 생성되며 웹페이지를 해석해서 DOM트리의 구축을 시도한다.
   Document객체는 readyState프로퍼티를 가지고 있으며, 이 프로퍼티에는 HTML문서의 해석 상태를 뜻하는 문자열이 저장된다.
   readyState프로퍼티의 초기값은 "loading"이라는 문자열이다.

프로퍼티 (p92)
- 객체 : 이름과 값을 한 쌍으로 묶은 데이터를 여러 개 모은 것이다.
- 프로퍼티 : 객체에 포함된 데이터 하나, 
  (이름과 값의 쌍)을 가리켜 객체의 프로퍼티라고 한다.
ex.
var card = {
  suit : "하트", ← 프로퍼티
  rank : "A"  ← 프로퍼티
};

3. HTML문서는 HTML구문을 작성 순서에 따라 분석하여 Document객체 요소와 텍스트 노드를 추가해 나간다.
4. HTML문서 안에 script요소가 있으면 script요소 안의 코드 또는 외부 파일에 저장된 코드의 구문을 분석한다.
   그 결과 오류가 발생하지 않으면 그 시점에 코드를 실행한다.
   이 때 script요소는 동기적으로 실행된다.
   즉, script요소의 구문을 분석해서 실행할 때는 HTML문서의 구문 분석이 일시적으로 막히고, 자바스크립트 코드의 실행을 완료한 후에는 일시적으로 막혀 있었던 HTML문서의 구문 분석을 재개한다.

동기 : 순차적으로

5. HTML문서의 모든 내용을 읽은 후에 DOM트리 구축을 완료하면 document.readyState프로퍼티의 값이 interactive로 바뀐다.

interactive : 대화형, 상호작용을 하는

6. 웹 브라우저는 Document객체에 DOM트리 구축 완료를 알리기 위해 DOMContentLoaded이벤트를 발생시킨다.
7. img등의 요소가 이미지 파일등의 외부 리소스를 읽어 들여야 한다면 이 시점에 읽어 들인다.
8. 모든 리소스를 읽어들인 후에는 document.readyState프로퍼티 값이 "complete"로 바뀐다.
   마지막으로 웹 브라우저는 Window객체를 상대로 load이벤트를 발생시킨다.
9. 이 시점부터 다양한 이벤트(사용자정의 이벤트, 네트워크 이벤트)를 수신하며, 이벤트가 발생하면 이벤트 처리기가 비동기로 호출된다.