브라우저 환경과 다양한 명세서

자바스크립트는 본래 웹 브라우저에서 사용하려고 만든 언어입니다. 이후 진화를 거쳐 다양한 사용처와 플랫폼을 지원하는 언어로 변모하였습니다.

자바스크립트가 돌아가는 플랫폼은 호스트(host) 라고 불립니다. 호스트는 브라우저, 웹서버, 심지어는 커피 머신이 될 수도 있습니다. 각 플랫폼은 해당 플랫폼에 특정되는 기능을 제공하는데, 자바스크립트 명세서에선 이를 호스트 환경(host environment) 이라고 부릅니다.

호스트 환경은 랭귀지 코어(ECMAScript – 옮긴이)에 더하여 플랫폼에 특정되는 객체와 함수를 제공합니다. 웹브라우저는 웹페이지를 제어하기 위한 수단을 제공하고, Node.js는 서버 사이드 기능을 제공해주죠.

아래 그림은 호스트 환경이 웹 브라우저일 때 사용할 수 있는 기능을 개괄적으로 보여줍니다.

최상단엔 window라 불리는 ‘루트’ 객체가 있습니다. window 객체는 2가지 역할을 합니다.

1. 전역 객체 챕터에서 설명한 바와 같이, 자바스크립트 코드의 전역 객체입니다.
2. '브라우저 창(browser window)'을 대변하고, 이를 제어할 수 있는 메서드를 제공합니다.

아래 예시에선 window 객체를 전역 객체로 사용하고 있습니다.

function sayHi() {
  alert("안녕하세요.");
}

// 전역 함수는 전역 객체(window)의 메서드임
window.sayHi();

아래 예시에선 window 객체가 브라우저 창을 대변하고 있으며, 이를 이용해 창의 높이를 출력합니다.

alert(window.innerHeight); // 창 내부(inner window) 높이

window 객체엔 다양한 메서드와 프로퍼티가 있는데, 추후 자세히 살펴보도록 하겠습니다.

문서 객체 모델(DOM)

문서 객체 모델(Document Object Model, DOM)은 웹 페이지 내의 모든 콘텐츠를 객체로 나타내줍니다. 이 객체는 수정 가능합니다.

document 객체는 페이지의 기본 ‘진입점’ 역할을 합니다. document 객체를 이용해 페이지 내 그 무엇이든 변경할 수 있고, 원하는 것을 만들 수도 있습니다.

예시: