[JavaScript] 브라우저 환경과 다양한 명세서 (DOM과 BOM)
1. 브라우저 환경과 다양한 명세서
자바스크리브는 본래 웹 브라우저에서 사용하려고 만든 언어이다.
자바스크립트가 돌아가는 플랫폼은 호스트(host)라고 불린다. 이 호스트는 브라우저, 웹서버 등등이 될 수도 있다.
각 플랫폼은 해당 플랫폼에 특정되는 기능을 제공하는데, 자바스크립트 명세서에선 이를 호스트 환경(host environment)라고 부른다.
호스트 환경은 랭귀지 코어에 더하여 플랫폼에 특정되는 객체와 함수를 제공한다.
웹브라우저는 웹페이지를 제어하기 위한 수단을 제공하고, Node.js는 서버사이드 기능을 제공한다.
--> 최상단에는 window라 불리는 root객체가 있다. window객체는 2가지 역할을 한다.
- 자바스크립트 코드의 전역객체이다. (전역객체 chapter에 있음)
- '브라우저 창(browser window)'을 대변하고, 이를 제어할 수 있는 메서드를 제공한다.
function sayHi() {
alert("안녕하세요.");
}
window.sayHi();
// window 객체를 전역 객체로 사용
alert(window.innerHeight);
// window객체가 브라우저 창을 대변하고 있음2. 문서 객체 모델(DOM)
문서 객체 모델(Document Object Model)은 웹 페이지 내의 모든 콘텐츠를 객체로 나타내 준다.( 이 객체는 수정가능)
document 객체는 페이지의 기본 '진입점' 역할을 한다.
document 객체를 이용해 페이지 내 그 무엇이든 변경할 수 있고, 원하는 것을 만들 수도 있다.
// 배경을 붉은색으로 변경하기
document.body.style.background = "red";** DOM은 브라우저만을 위한 모델이 아니다**
--> 브라우저가 아닌 곳에서 DOM을 사용하는 경우가 있다. HTML 페이지를 다운로드하고 이를 가공해주는 서버사이드 스크립트에서도 DOM을 사용한다.
3. 브라우저 객체 모델 (BOM)
브라우저 객체 모델(Browser Object Model)은 문서 이외의 모든 것을 제어하기 위해 브라우저(호스트 환경)가 제공하는 추가 객체를 나타낸다.
(Example)
- navigator 객체는 브라우저와 운영체제에 대한 정보를 제공한다. 객체엔 다양한 프로퍼티가 있는데, 가장 잘 알려진 프로퍼티는 현재 사용중인 브라우저 정보를 알려주는 navigator.userAgent와 브라우저가 실행중인 운영체제 (Windows, Linux, Mac) 정보를 알려주는 navigator.platform이다.
- location 객체는 현재 URL을 읽을 수 있게 해주고 새로운 URL로 변경할 수 있게 해준다.
alert(location.href); // 현재 URL을 보여줌
if (confirm("위키피디아 페이지로 가시겠습니까?")) {
location.href = "https://wikipedia.org"; // 새로운 페이지로 넘어감
}(alert / confirm / prompt 역시 BOM의 일부이다. 문서와 직접 연결되어 있지 않지만, 사용자와 브라우저 사이의 커뮤니케이션을 도와주는 순수 브라우저 메서드이다.)