ECMAScript 로 규정된 기본 객체 외의 자바스크립트 실행환경에 정의된 객체인 호스트 객체인 Location, History, Navigator, Screen, Document 등등에 대해 알아본다.
이를 통해 css 스타일을 제어하거나, html 문서를 제어하거나, 웹브라우저의 Window 객체를 제어할 수 있고, 대화형 웹페이지를 동적으로 만들 수 있다.
자바스크립트를 사용하지 않는 페이지를 정적 페이지 라고 한다. 정적 페이지는 문서를 표현할 뿐, 변하지 않는다. 자바스크립트를 이용하면 페이지를 동적으로 만들 수 있다.
자바스크립트가 하는 일을 네 가지로 분류해 본다면 다음과 같다.
Location, Navigator)XMLHttpRequest 객체를 활용웹 애플리케이션은 본래 웹에 문서를 표시하기 위한 소프트웨어 였으나, 현재의 웹 브라우저는 웹앱을 실행하기 위한 하나의 OS라고 보아야 한다. 최신의 웹브라우저는 파일IO, 데이터베이스 기능, 비동기 통신, 2/3차원 그래픽스, 키보드입력, 마우스 드래그 앤 드랍, 멀티 스레딩 등등의 기능이 제공된다.
또한, JIT 컴파일러(just in time compiler)를 도입하면서 프로그램의 실행 속도에서도 많은 발전이 있어왔다.
웹 브라우저에서 HTML 문서를 분석하고, 표시하는 프로그램을 렌더링 엔진이라고 한다. 이친구는 HTML 문서를 분석하여 DOM 트리를 구축한 이후 HTML 안에 지정된 자바스크립트 코드를 다음의 순서로 실행한다.
Window 객체가 생성된다.(탭마다)Document 객체가 Window 객체의 프로퍼티로 생성되고, 웹 페이지를 해석해서 DOM 트리 구축을 시도한다. Document 객체는 readyState 프로퍼티를 가지고 있고, 이 프로퍼티는 HTML문서의 해석 상태를 나타내는 문자열이 저장된다. (최초값 : "loading")Document 객체요소와 텍스트 노드를 추가한다.script 요소가 있으면 그 코드를 분석하고, 오류가 발생하지 않으면 그 시점에 코드를 실행한다. (css도 읽는다.) 이때, script 요소는 동기적으로 실행된다. 즉, script 요소의 구문을 분석해서 실행할 때는 HTML 문서의 구문 분석이 일시적으로 막히고, 자바스크립트 코드의 실행을 완료한 후에는 HTML 문서의 구문 분석이 재개된다.document.readyState 프로퍼티의 값이 "interactive" 로 바뀐다.Document 객체에 DOM 트리 구축완료를 알리기 위해 DOMContentLoaded 이벤트를 발생시킨다.img 등의 요소가 이미지 파일 등의 외부 리소스를 읽어야 한다면 이 시점에서 시행한다.document.readyState 프로퍼티 값이 "complete" 로 바뀐다. 마지막으로 웹 브라우저는 Window 객체를 상대로 load 이벤트를 발생시킨다.HTML 문서를 다 읽어들이지 못한 상태에서 자바스크립트로 HTML 요소를 조작하면 조작할 요소가 없으므로 제대로 동작하지 않고, 이를 방지하기 위해 window.onload 이벤트 처리기에 초기화 스크립트를 등록할 수 있다. (window.load 이벤트는 모든 리소스를 읽어들인 후 발생하기 때문.)
또한, 이미지 등의 외부 리소스를 읽어들이는 시점이 DOM 트리를 구축한 이후이고, load 이벤트는 외부 리소스를 모두 받아온 이후에 발생하기 때문에 리소스를 받아오는 만큼 사용자는 기다리고 있어야 한다는 점을 유의해야 한다. 이를 방지하기 위해 load 이벤트 대신 DOMContentLoaded 이벤트의 이벤트 처리기에 document.addEventListener() 메서드를 사용하여 초기화 작업을 진행할 수 있다. 이렇게 작성한다면 사용자가 오래 기다리지 않고도 웹 페이지를 조작할 수 있게 된다.
async 와 defer 속성은 script 요소의 논리 속성으로 HTML5 부터 추가되었다. 이 속성을 이용하면 자바스크립트 코드를 실행할 때 HTML 구문 분석을 일시정지 시키지 않는다.
<script async src="../js/script.js"></script>
<script defer src="../js/script.js"></script>
async 속성은 script 요소의 코드가 비동기적으로 실행되게 만든다. HTML 문서의 구문 분석 처리를 막지 않으며 script 요소의 코드를 최대한 빨리 싱행한다. 하지만, 이 속성을 설정하면 다 읽어들인 코드부터 비동기적으로 실행하여 실행 순서가 보장되지 않고, 순서에 의존하는 script 요소에는 async 속성을 설정하면 안된다.
defer 속성을 설정한 script 요소는 DOM 트리 구축이 끝난 후에 실행된다. 따라서 자바스크립트 코드로 요소 객체에 이벤트 처리기를 등록하는 등의 초기화 작업을 할 수 있다. 즉, DOMContentLoaded 이벤트의 이벤트 처리기에 document.addEventListener() 메서드를 사용하는 방법의 대안으로 활용될 수 있다.
이제부터는 각 객체가 가진 프로퍼티와 메서드를 확인해 보는 시간을 가질 것인데, 모두 정독할 필요는 없고, 필요시 사용하면 된다.
창에 표시되는 문서의 URL을 관리한다. window.location 또는 location 으로 참조할 수 있다.
예시로 보여줄 URL을 가진 페이지의 location 객체의 프로퍼티는 다음과 같다.
http://www.example.com:80/test/index.html?q=value#anchor
| 프로퍼티 | 설명 | 예 |
|---|---|---|
hash | 앵커 | #anchor |
host | 호스트 이름:포트번호 | www.example.com:80 |
hostname | 호스트 이름 | www.example.com |
herf | 전체 URL | http://www.example.com:80/test/index.html?q=value#anchor |
pathname | 웹사이트 루트를 기준으로 한 상대 경로 | /test |
port | 포트번호 | 80 |
protocol | 프로토콜 | http: |
search | 질의 문자열 | ?q=value |
location 객체의 메서드는 다음과 같다
| 메서드 | 설명 |
|---|---|
assign(url) | url 이 가리키는 문서를 읽는다.(이력o) |
reload() | 문서를 다시 읽어들인다. |
replace(url) | url로 이동한다. (이력x) |
toString() | location.href 값을 반환 |
창의 웹 페이지 열람 이력을 관리한다.
| 프로퍼티 | 설명 |
|---|---|
length | 현재 세션의 이력 개수 |
scrollRestoration | 웹 페이지를 이동한 후 동작하는 웹 브라우저의 자동 스크롤 기능을 끄거나 켜는 값 "auto"/"manual" |
state | pushState와 replaceState 메서드로 설정한 state 값 |
| 메서드 | 설명 |
|---|---|
back() | 뒤로가기 |
forward() | 앞으로가기 |
go(number) | 숫자만큼 앞으로가기(음수는 뒤로가기) |
pushState(state, title, url) | 열람이력을 추가 |
replaceState(state, title, url) | 열람이력을 수정 |
navigator 객체는 스크립트가 실행 중인 웹 브라우저 등의 애플리케이션 정보를 관리한다. 브라우저 테스트에 활용되고, userAgent 프로퍼티를 통해 어떤 브라우저, 어떤 플랫폼을 사용하는지에 대한 정보를 관리할 수 있다.
| 프로퍼티 | 설명 |
|---|---|
userAgent | 웹 브라우저가 user-agent 헤더에 보내는 문자열 |
platform | 브라우저의 플랫폼 win32 / macIntel |
geolocation | 단말기의 물리적 위치 Geolocation 객체 |
screen 객체는 화면(모니터) 크기와 색상등의 정보를 관리한다.
| 프로퍼티 | 설명 |
|---|---|
height | 화면 높이 |
width | 화면 너비 |
document 객체는 창에 표시되고 있는 웹 페이지를 관리한다. 이 객체로 웹페이지의 내용물인 DOM 트리를 읽거나 쓸 수 있다. 가장 중요한 객체이다.
| 프로퍼티 | 설명 |
|---|---|
characterSet | 문서에 적용된 문자 인코딩 (읽기전용) |
cookie | 문서의 cookies를 쉴표로 연결한 문자열 |
domain | 문서의 도메인 (읽기전용) |
lastModified | 마지막 문서 수정일 (읽기전용) |
location | location 객체 |
readyState | 문서를 읽어들인 상태(읽기전용) |
referer | 문서에 링크된 페이지 url(읽기전용) |
title | 문서 제목 |
URL | 문서 url(읽기전용) |
| 메서드 | 설명 |
|---|---|
close() | document.open() 으로 연 문서를 닫는다. |
open() | 문서를 쓰기 위해 연다 |
write() | document.open() 으로 연 문서에 기록한다. |
writeln() | document.open() 으로 연 문서에 기록(개행문자추가). |
자바스크립트를 사용하면 DOM 트리의 노드 객체를 가져와서 제어할 수 있다. 렌더링 엔진은 DOM 트리와 스타일 규칙(css)이 바뀔 때마다 렌더 트리를 다시 구성해서 웹 페이지를 다시 그린다.
노드를 가져오는 방법은 여러가지가 있다. id를 기준으로 가져오는 document.getElementById(), document.getElementByTagName(), document.getElementByClassName(), document.getElementByName()등의 메서드를 사용하여 가져오는 방법이 있고, document.querySelectorAll(), document.querySelector() 와 같이 CSS selector로 가져오는 방법이 있다. 있다.
요소 객체의 속성은 프로퍼티로 정의되어 있다. 일반적인HTML 속성, 이벤트 처리기 프로퍼티 등이 정의되어 있다. 요소이름.속성이름으로 접근이 가능하다. 속성이름이 자바스크립트의 예약어와 겹치는 경우 속성이름 앞에 html 을 붙이고, 여러단어로 구성된 속성의 경우 카멜케이스표기법을 사용한다.
속성의 값을 가져오는 방법은 요소객체.getAttribute(속성이름)을 사용한다.
속성의 값을 설정하는 방법은 요소객체.setAttribute(속성이름)을 사용한다.
속성이 존재하는지 확인하는 방법은 요소객체.hasAttribute(속성이름)을 사용한다.
속성의 값을 삭제하는 방법은 요소객체.removeAttribute(속성이름)을 사용한다.
요소 안의 HTML 코드, 웹페이지에 표시할 때의 텍스트 정보, 객체 안의 노드의 계층구조를 가지고 노는 방법을 알아볼 것이다.
innerHTML 프로퍼티는 요소 안의 HTML코드를 가리킨다. 이 프로퍼티를 사용해서 요소 안의 코드를 읽거나 쓸 수 있다. 간편하게 HTML 코드를 편집할 수 있지만, 코드를 문자열로 다루어야 하므로 복잡한 구조를 가진 코드를 편집할 때에는 적합하지 않다. 복잡한 구조를 가진 내용을 편집할 때에는 DOM 메서드가 적합할 것이다.
<p id="cards">하트는 사랑이라는 뜻입니다</p>
<script>
var p = document.getElementById("cards");
p.innerHTML = "하트는 <strong>사랑</strong>이라는 뜻입니다."
textContent는 요소의 내용을 웹페ㅣ지에 표시했을 때의 텍스트 정보를 가리킨다. 이 프로퍼티에 텍스트를 대입하면 텍스트를 변화시킬 수 있다.
DOM API를 사용하면 노드를 만들어 DOM 트리에 삽입할 수 있고, 노드를 삭제하거나 치환할 수 있다.
| 메서드 | 생성하는 노드 객체 |
|---|---|
document.createElement(요소 이름) | 요소 노드 객체 |
document.createAttribute(속성 이름) | 속성 노드 객체 |
document.createTextNode(텍스트) | 텍스트 노드 객체 |
document.createComment(텍스트) | 주석 노드 객체 |
document.createDocumentFragment() | 도큐먼트 프래그넌트 |
var element = document.createElement(요소이름);
유의할 점은 노드 객체를 메모리에 생성하기만 했을 뿐, DOM 트리와는 아무런 관계가 없다는 것이다.
노드 객체를 만들었으므로 DOM 트리에 삽입하여야 한다.
요소의 마지막에 삽입하고자 한다면 요소.appendChild(삽입) 메서드를,
지정한 자식 노드의 바로 앞에 삽입하고자 한다면
요소.insertBefore(삽입노드, 지정노드) 메서드를 사용할 수 있다.
이미 있는 노드에 위의 두 메서드를 사용하면 자리가 옮겨진다.
노드.removeChild(자식노드) 메서드를 사용하여 자식 노드를 삭제할 수 있다.
document.innerWidth : 뷰포트의 너비
document.innerHeight : 뷰포트의 높이
window.pageXOffset : x 축 방향으로 스크롤한 거리
window.pageYOffset : y 축 방향으로 스크롤한 거리
window.scrollTo(x,y) : 특정 원점까지 스크롤
window.scrollBy(dx,dy) : 특정 거리만큼 스크롤
window.scrollIntoView(alignWithTop) : 특정요소의 위치까지 스크롤
요소의 class 속성을 바꾸어 스타일을 제어할 수 있다. 요소의 className 프로퍼티에 기록된 class 속성값을 바꾸면 적용되는 스타일도 바뀐다.
요소는 여러 개의 클래스 이름을 공백 문자로 연결해서 지정할 수 있다. 이렇게 하면 여러개의 css 클래스에 속하게 된다. 이는 classList 프로퍼티에 정의되어있다. classList 프로퍼티는 DOMTokenList 객체를 값으로 가지고 있다. 이 객체에는 클래스 목록에 클래스를 추가하는 add(), 클래스목록에서 클래스를 제거하는 remove(), 추가하거나 삭제하는 toggle(), 있는지 없는지 확인하는 contains() 등의 메서드가 있다.
저자: 강화수(hwasurr)