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

브라우저 객체 모델 (BOM, Browser Object Model)

브라우저에 대한 모든 내용을 담고 있는 객체.

뒤로가기, 북마크, 즐겨찾기, History, Url 등

브라우저가 가지고 있는 정보를 객체화시켜서 관리한다

 

계층적 구조

window (브라우저, 최상위 객체)
document	screen	location	history	navigator
body, div, img, a 등	사용자의 모니터 정보(속성)를 제공한다.	브라우저 주소창의 url에 대한 정보와 새로고침기능 등 제공	사용자가 방문한 사이트에 대한 이력(history)	브라우저의 정보 운영체제 정보 등

 

window 객체 메서드 종류

oper() , alert() , prompt() : 질의응답 창을 띄운다 , confirm() : 확인/취소 창을 띄운다

moveTo() : 브라우저 창 위치 이동

resizeTo() : 브라우저 창의 너비, 높이 변경 (크롬, 오페라에선 정상적으로 작동 안 한다고..)

setInterval() / clearInterval : 일정 간격으로 지속적으로 실행문을 실행시킬 때 / 취소

   var 변수 = setInterval("스크립트 실행문", 시간 간격); [시간간격은 밀리세컨드)

- 3초마다 1씩 더하고, 그 결과를 console에 표시한다.
<script>
    var i=0;
    var auto = setInterval("console.log(i++);", 3000);
</script>

<button onclick="clearInterval(auto)">Stop</button>

setTimeout() : 일정간격으로 한 번만 실행문을 실행시킬 때 사용. 사용법은 위와 동일

 

screen 객체

screen.width / .height

.availWidth : 작업표시줄을 제외한 화면의 너빗값을 반환

.availHeight : 작업 표시줄을 제외한 화면의 높잇값 반환

.colorDepth : 사용자가 모니터가 표현 가능한 컬러 bit를 반환

 

location 객체

url에 대한 정보(속성) , 새로 고침 기능 (메서드) 등을 제공하는 객체

종류	설명
location.href	주소 영역에 참조 주소를 설정하거나 URL 반환
hash	URL에 해시값 (#) 반환. ex) http://www.aa.com#hello
hostname	URL에 호스트 이름을 설정하거나 반환
host	URL에 호스트 이름과 포트 번호 반환
port	URL에 포트번호를 반환
protocol	URL에 프로토콜을 반환
search	URL에 쿼리(요청 값) 반환. ex) http://www.aa.com?pageNum=1&sort=DESC
reload()	새로 고침. refresh

 

history 객체

종류	설명
history.back()	이전 방문한 페이지로 이동
forward()	다음 방문한 페이지로 이동
go(이동할 숫자)	이동 숫자만큼 페이지 이동. -2 라면 2단계 이전의 페이지로 이동
length	방문 기록에 저장된 목록의 개수를 반환

 

navigator 객체

현재 방문자가 사용하는 브라우저의 정보, 운영체제의 정보 제공

종류	설명
appCodeName	방문자의 브라우저 코드명을 반환
appName	브라우저 이름 반환
appVersion	브라우저 버전 정보 반환
language	사용 언어
product	브라우저가 사용하는 엔진 이름 반환
platform	운영체제 (OS) 정보 반환
userAgent	브라우저와 OS의 종합 정보 제공