클라이언트 자바스크립트

자바스크립트를 사용하지 않는 웹 페이지는 정적 웹페이지라고 흔히 불립니다.

즉 문서 하나를 표현하기만할 뿐  변화하지 않습니다.

 

자바스크립트를 활용하면 사용자 입력에 대응하는 등 다양한 작업을 자동화하여 웹 페이지의 사용성을 향상시킬 수 있습니다.

 

기술적인 측면에서는 웹 브라우저에서 자바스크립트가 하는 일을 네 가지로 분류할 수 있습니다.

 

1.웹페이지의 document객체 제어

   - DOM API를 활용하여 제어

 

2.웹 페이지의 window객체 제어 및 브라우저 제어

   - 웹 브라우저에 내장된 다양한 객체를 활용

 

3.웹 페이지에서 발생하는 이벤트 처리

   - 이벤트 처리기를 활용

 

4.http를 이용한 통신 제어

   - XMLHttpRequest 객체 활용

 

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

 

1.웹 브라우저로 웹 페이지를 열면 가장 먼저 window객체가 생성됩니다. window객체는 웹페이지의 전역 객체로 웹페이지와 탭마다 생성됩니다.

 

2.document 객체가 window객체의 프로퍼티로 생성되며 웹 페이지를 해석해서 DOM 트리의 구축을 시도합니다.

 

3.HTML문서는 HTML 구문을 작성 순서에 따라 분석하며 Document 객체 요소와 텍스트 노드를 추가해 나갑니다.

 

4.HTML문서 안에 script 요소가 있으면 script 요소 안의 코드 또는 외부 파일에 저장된 코드의 구문을 분석합니다.

그 결과 오류가 발생하지 않으면 그 시점에 코드를 실행합니다. 이때 script 요소는 동기적으로 실행됩니다.

script요소의 구문을 분석해서 실행할 때는 html문서의 구문 분석이 일시적으로 막히고, 자바스크립트 코드의 실행을 완료한 후에는 일시적으로 막혀 있었던 html 문서의 구문 분석을 재개합니다.

 

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

 

6.웹 브라우저는 Document 객체에 DOM트리 구축 완료를 알리기 위해 DOMContentLoaded 이벤트를 발생시킵니다.

 

7.img등의 요소가 이미지 파일 등의 외부 리소스를 읽어 들여야 한다면 이 시점에 읽어 들입니다.

 

8.모든 리소스를 읽어 들인 후에는 document.readyState 프로퍼티 값이 complete로 바뀝니다.

 

9.이 시점부터 다양한 이벤트를 수신하며, 이벤트가 발생하면 이벤트 처리기가 비동기로 호출됩니다.