모던 자바스크립트 (문서) 18-1. 브라우저 환경과 다양한 명세서

호스트

: 자바스크립트가 돌아가는 플랫폼

: 브라우저, 웹서버, 기타 자바스크립트 프로그램이 돌아가는 기계

 

 

 

호스트 환경

: 각 플랫폼이 제공하는 특정한 기능

: Language cor에 더하여 플랫폼에 특정 되는 객체와 함수를 제공

: 웹 브라우저는 웹 페이지를 제어하기 위한 수단을 제공하고

  Nodejs는 서버 사이드 기능을 제공하는 것이 예시

 

 

 

 

호스트 환경이 웹 브라우저 일 떄의 기능

브라우저 호스트 환경

: 최상단에 Window 라는 루트 객체가 존재 

 

- window

: 자바스크립트 코드의 전역 객체

: 브라우저 창을 대변하고 이를 제어할 수 있는 메서드를 제공

 

 

 

 

문서 객체 모델 (Document Object Model, DOM)

: 웹 페이지 내의 모든 콘텐츠를 객체로 나타내주는 모델

: 이 객체는 수정할 수 있음

 

- document 객체

: 페이지의 기본 진입점 역할

: 이를 이용해 페이지 내 무엇이든 변경 가능하고 원하는 것을 만들 수 있음

// 배경을 붉은색으로 변경하기
document.body.style.background = "red";

// 1초 후 원상태로 복구하기
setTimeout(() => document.body.style.background = "", 1000);

 

 

 

※ DOM은 브라우저만을 위한 모델이 아님

: DOM 명세서에는 문서의 구조와 이를 조작할 수 있는 객체에 대한 설명이 담겨 있음

: HTML 페이지를 다운로드하고 이를 가공해주는 서버 사이드 스크립트에서도 DOM을 사용

: 위 경우 명세서 일부만을 지원

 

 

 

 

 

CSS 객체 모델 (CSSOM)

: CSS 규칙과 스타일 시트를 객체로 나타내고 이 객체를 어떻게 읽고 쓸 수 있을지에 대한

  설명을 담은 별도의 명세서

: CSS 규칙은 대부분 정적이기 때문에 실무에서 자주 사용되지는 않음

: 자바스크립트를 이용해 CSS 규칙을 추가 혹은 제거해야하는 경우 사용 

 

 

 

 

브라우저 객체 모델 (BOM)

: 문서 이외 모든 것을 제어하기 위해 브라우저가 제공하는 추가 객체

:  navigator.userAgent, navigator.platform, location 등의 객체

 

 

 

 

 

 

 

 

Refference

 

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