JavaScript

: 웹 페이지를 동적으로 변경해주는 언어

웹에서의 JavaScript 역할

1. 웹 페이지 및 브라우저 제어
2. 웹 페이지에서 발생하는 이벤트 처리
3. HTTP를 이용한 통신 제어

 

웹페이지에 script 적용

1. script 태그 내부에 JavaScript 직접 작성

<script type="text/javascript">
	// JavaScript 작성
</script>

2. script 태그의 src 속성으로 js 파일 호출

<script type="text/javascript" src="./js/myjs.js"></script>

cf) HTML5 에서는 script 태그의 type 속성 생략 가능

script 태그의 위치

HTML 파일 어느 곳에 위치해도 동작하나, body 태그가 끝나기 직전에 자바스크립트 파일을 호출하는 것을 권장

→ 브라우저가 자바스크립트를 페이지에 반영할 때에는 화면 렌더링을 멈추므로, 자바스크립트의 호출은 페이지가 내용을 대부분 보여준 다음에 하는 것이 좋음

→ 그러나, AMD 기술을 사용하면 head 태그에 위치해도 웹페이지를 빠르게 표시 가능

 

브라우저에서의 JavaScript 실행 순서

1. Window 객체(전역 객체) 생성

2. Document 객체 생성, DOM 트리 구축 (아래 참고)

3. HTML 문서를 순서대로 분석하며 Document 노드 추가

4. script 요소가 있으면 동기적으로 실행
   (HTML 구문 분석 일시 정지)

5. DOM 트리 구축 완료

6. 이미지 등의 외부 리소스 읽어 들이기

7. 이제 다양한 이벤트를 수신하며, 발생 시 이벤트 처리기가 비동기 호출됨

 

---

document 객체

: HTML 문서 관리 객체

→ 웹 페이지에 존재하는 HTML 요소에 접근할 때는 document 객체부터 시작

DOM

(Document Object Model)
: HTML 문서 제어 API

→ 웹 페이지에 나타나는 HTML 문서를 객체 기반으로 표현하는 방식
→ JavaScript에 의해 수정될 수 있는 동적 모델

DOM 트리

: DOM의 계층 구조를 나타낸 것 (웹페이지 내용물을 트리구조로 구성)

→ 노드 객체들로 구성됨

📋 주요 노드

종류	설명	생성자	nodeType
요소 노드	HTML 요소 객체	HTMLElement	1
속성 노드	HTML 요소의 속성 객체	Attr	2
텍스트 노드	텍스트 문자열 객체	Text	3