JavaScript] Browser environment, DOM, BOM

출처 : https://javascript.info/browser-environment

Browser environment, specs

JavaScript는 처음에 웹 브라우저를 위해 만들어졌다. 따라서 많은 활용과 플랫폼과 함께 발전하였다. 

browser, web-server, 또다른 host와 같은 platform이다. 각각은 특화된 platform 기능을 제공한다. 이것을 host environment라고 칭한다. 

 

host environment는 language core뿐만 아니라 자신의 objects, function을 제공한다. 

아래는 web browser에서 JavaScript가 실행될때 갖는 것들의 조감도이다. 

window라 불리는 root object가 있다. 2가지 역할이 있다. 

• JavaScript code의 global object이다. 

function sayHi() {
  alert("Hello");
}

// global functions are methods of the global object:
window.sayHi();

• browser window를 나타내며, 컨트롤 할 수 있는 함수를 제공한다. 

alert(window.innerHeight); // inner window height

DOM (Document Object Model)

모든 page content를 수정가능한 objects로 나타낸다. 'document' object는 page의 주 진입점이로, 이를 사용해서 페이지의 어떤 것이든 수정 및 생성이 가능하다. 

// change the background color to red
document.body.style.background = "red";

// change it back after 1 second
setTimeout(() => document.body.style.background = "", 1000);

이보다 훨씬 더 많은 Properties와 methods가 명세서에 나와있다.

DOM specification : https://dom.spec.whatwg.org/

 

BOM (Browser Object Model)

browser가 제공하는 추가적인 objects를 나타낸다. 

• navigator object는 browser에 대한 배경정보를 제공한다. navigator.userAgent는 현재 browser, navigator.platform은 platform에 대한 정보를 나타내는 properties이다. 
• location object는 현재 URL을 읽고, browser가 redirect할 수 있도록 한다. 

alert(location.href); // shows current URL
if (confirm("Go to Wikipedia?")) {
  location.href = "https://wikipedia.org"; // redirect the browser to another URL
}

• alert / confirm / prompt