자바스크립트 호스트 환경
자바스크립트가 돌아가는 플랫폼을 호스트(host)라고 부른다.
각 플랫폼마다 특정한 기능을 제공하는데, 이를 호스트 환경(host environment)이라고 한다.
아래 그림과 같이, JavaScript 랭귀지 코어를 기반으로 플랫폼에서 객체와 함수를 추가로 제공한다.
브라우저는 웹페이지를 제어하기 위한 DOM과 같은 수단을 제공하고, Node.js는 서버 사이드 기능을 제공한다.
루트 객체 window
자바스크립트 언어 최상단에는 루트 객체 window가 존재한다.
- 자바스크립트 코드의 전역 객체
- 브라우저 윈도우를 대변하고, 이를 제어할 수 있는 메서드를 제공한다.
function sayHi() {
alert('안녕하세요!');
}
window.sayHi(); // 전역 함수는 전역 객체 window의 메서드alert(window.innerHeight); // 브라우저 윈도우의 내부 높이문서 객체 모델 (DOM)
문서 객체 모델(Document Object Model)은 웹 페이지 내의 모든 콘텐츠를 객체로 나타낸다.
document 객체는 페이지의 진입점 역할을 한다.
document.body.style.background = 'yellow'; // 배경을 노란색으로 변경한다.- DOM은 브라우저에서만 작동하는 모델이 아니다. 서버 사이드 스크립트에서도 DOM을 사용할 수 있다.
- CSS 규칙과 스타일 시트를 객체로 나타낸 것을 CSSOM(CSS Object Model)이라고 한다.
브라우저 객체 모델 (BOM)
브라우저 객체 모델(Browser Object Model)은 문서 이외의 모든 것들을 제어하기 위해 호스트 환경(브라우저)이 제공하는 추가 객체이다.
navigator객체: 브라우저와 운영체제에 대한 정보를 제공한다.// 현재 사용 중인 브라우저 정보 navigator.userAgent; // 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.5249.207 Whale/3.17.145.18 Safari/537.36' // 브라우저가 실행 중인 운영체제 정보 navigator.platform; // 'MacIntel'location객체: 현재 URL을 읽고 변경(redirect)할 수 있게 한다.console.log(location.href); // 현재 주소를 반환 location.href = 'https://wikipedia.org'; // 새로운 주소로 이동alert,confirm,prompt등 사용자와 브라우저 사이의 커뮤니케이션을 도와주는 브라우저 메서드가 존재한다.
Software Engineer 🍊