[JavaScript] 브라우저 객체모델 BOM(Browser Object Model)

BOM(브라우저 객체모델)
브라우저에 포함된 모든 요소를 의미하며 브라우저 정보에 접근하거나 여러 기능들을 제어
- DOM(문서 객체모델)과 달리 W3C 표준객체모델은 아님

 

Window

웹 브라우저의 창을 나타냄

→ JavaScript 의 모든 객체, 전역함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 됨, 최상위 객체

* 해당 객체의 가장 중요한 프로퍼티 중 하나가 document 객체 - 브라우저에 표시되는 내용에 해당하는 문서를 나타내는 객체

// 페이지가 전부 로드된 후 코드가 실행
onload
// 새 브라우저를 생성
open("경로", "브라우저명", "옵션")
// 브라우저를 닫음
close()
// 경고창
alert("텍스트")
// 사용자 입력창
prompt("질문", "기본값")
// 확인 / 취소 창
confirm("질문")
// 정수 초 이후 함수 1번 실행
setTime(함수, 정수)
// 정수 초마다 함수 실행
setInterval(함수, 정수)

window.요소명 혹은 ('window' 접두사 생략)요소명 으로 호출

 

Location

브라우저에 위치(url)에 대한 정보 제공 및 변경에 관여

// 주소창 url에서 #과 그 뒤에 오는 값
location.hash
// 주소창 url에서 도메인명 
location.host
location.hostname
// 주소창 url에서전체 주소
location.href
// 주소창 url에서 메인 다음경로
location.pathname
// 주소창 url에서 포트번호
location.port
// 주소창 url에서 프로토콜
location.protocol

 

History

인터넷 방문기록(히스토리 정보)에 대한 정보 제공

// 1 단위만큼 다음 / 이전 페이지로 이동(직전페이지: -1, 직후페이지: 1)
history.go(숫자)
// 아래 history 객체는 사용자가 이동한 페이지의 방문기록을 기반하여 이동
// 이전 페이지로 이동
history.back()
// 다음 페이지로 이동
history.forward()

 

Screen

사용자의 디스플레이 화면(모니터)에 대한 정보 제공

// 사용가능한 스크린 가로 너비 값
screen.avilWidth
// 사용가능한 스크린 세로 높이 값
screen.avilHeight
// 창이 위치할 수 있는 최상위 위치 값
screen.avilTop
// 창이 위치할 수 있는 최좌측 위치 값
screen.avilLeft

 

Navigator

브라우저 정보(공급자 및 버전 정보) 제공

// 브라우저의 코드명
navigator.appCodeName
// 브라우저의 이름
navigator.appName
// 브라우저의 기본 버전과 실행중인 플랫폼
navigator.appVersion
// 브라우저의 전체적 정보
navigator.userAgent