[Javascript] BOM

호스팅환경

자바스크립트는 플랫폼에 따라 호스트 환경을 가지게 됩니다.

 

호스팅 환경이란 자바스크립트가 실행되는 환경을 일컫습니다.

 

이 호스팅 환경에서는 플랫폼에 특정되는 객체와 함수를 제공합니다.

 

호스팅 환경이 웹 브라우저라면 웹 브라우저는 아래와 같은 기능을 사용할 수 있습니다

 

 

여기서 CSSOM은 CSS의 객체환경이고 자바스크립트는 자바스크립트의 전역객체를 의미합니다.

---

BOM

BOM은 Browser Object Model의 준말입니다.

 

BOM은 웹 브라우저가 문서 이외의 모든것을 제어하기위해 제공하는 기능입니다.

---

BOM의 객체들

Window 객체

const {alert,confirm,prompt,setTimeout,setInterval,console} = window

 

Location 객체

const {href,protocol,host,port,search,hash,replace,reload,pathname} = location

 

href : 주소창에 있는 주소를 가져오는 본문입니다.
protocol : 주소앞에있는 http: 혹은 https: 를 의미합니다.
host : 주최자를 의미합니다.
search: 주소창에 ?가 써져있는 주소를 간혹 볼 수 있습니다. 이때 ?는 ?부터 시작하는 쿼리를 의미합니다.
pathname : 지금 사용자가 어느 페이지를 보고있는지 확인시켜줍니다.

 

Navigator 객체

const {userAgent,language,onLine,geolocation} = navigator

 

userAgent : 유저가 어떤 운영체제를 사용하는지 알려줍니다.
language : 유저의 언어정보를 알려줍니다.
online : 유저의 브라우저가 인터넷에 연결되어 있는 상태인지 확인해줍니다
geolocation : 유저의 위치정보 좌표값을 알려줍니다.

screen 객체

const {width, height, availWidth, availHeight, orientation} = screen

 

width, height : 유저의 디바이스 해상도값을 말합니다.
availWidth, availHeight : 실제 브라우저창의 가용해상도값을 말합니다.
orientation : 기기의 화면방향이 가로인지 세로인지 알려줍니다.

history객체

const {back, forward, go, length, pushState, replaceState} = history

 

이 객체는 유저의 history(방문기록)을 제어하는 객체입니다.
웹 브라우저 주소창 조작 방식과 유사합니다
back은 뒤로가기 forward는 앞으로가기
go : 현재 위치에서 n만큼 이동하기
pushState, replaceState : 두 메서드 모두 주소창을 새 주소창으로 바꾸지만 실제 이동하거나 새로고침되지 않습니다. 다만 히스

토리 기록에 남깁니다.

 

 

해당 객체들은 콘솔창에 찍어봄으로서 더 많은 내용과 값들을 확인할 수 있습니다.