[Javascript] Browser Object Model (브라우저 객체 모델)
BOM : Browser Object Model (브라우저 객체 모델)
JavaScrpt 는 소위 BOM 이라 불리우는 '브라우저 객체 모델' 을 통해 '브라우저' 를 제어 합니다.
BOM 은 특별히 '표준' 이 정해져 있는 모델이 아닙니다.
그러나, 오늘날 대부분의 브라우저들이 'JavaScript' 를 통해 그리고 'BOM 의 object 들과 method' 들로 통해
제어되고 있으며 이들 브라우저들이 대체로 같은 이름의 object 와 method 들은 사용하다 보니
BOM 이 마치 '표준'처럼 여겨져 사용되고 있습니다. (사실, 브라우저마다 조금씩 다르게 구현된 부분도 있습니다)
BOM 의 object 계층은 다음과 같습니다.
window
├─ document
├─ screen
├─ location
├─ history
└─ navigator
■ window 객체
BOM 의 최상위 객체.
모든 '전역(global)' 객체, 변수, 함수는 자동적으로 window 객체 멤버가 된다.
일반적으로 window객체가 '생략' 되며, 이 경우 자동적으로 window 객체 멤버입니다.
document 또한 window 객체 멤버임에 주목! alert(), confirm(), prompt() 도 window 소속
window.document.getElementById("header");
↕
document.getElementById("header");
■ BOM - screen
window.screen object
(window) 는 생략 가능
'사용자 스크린 (모니터) 를 다루는 객체'
- 다음과 같은 property 값이 있다.
screen.width 스크린 크기
screen.height
screen.availWidth 사용 사용 가능한 영역 (OS 차지 영역 (ex:작업표시줄) 제외)
screen.availHeight
screen.colorDepth 색상 bit 수
screen.pixelDepth (최근 브라우저에선 colorDepth 와 pixelDepth 는 같다)
- 반면에 다음은 '브라우저'의 크기다
window.innerWidth 와 window.innerHeight 브라우저 안 내부 영역 <body> 영역
window.outerWidth 와 window.outerHeight 브라우저 창 전체 크기
- 실제로는 브라우저 호환 등의 문제로 다음과 같이 체크해야 한다 (IE8 이하..)
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
■ BOM - location
window.location object
브라우저의 현재 URL 정보를 다루거나,
다른 페이지로 이동할 때 사용함 ( 새로운 request 발생 ! )
location.href : 현 페이지의 href (URL) 값 리턴함.★★★
location.hostname : 호스트 이름 ex) www.naver.com
location.pathname : 현 페이지의 경로 (프로토콜 제외)
location.protocol : 웹 프로토콜 리턴 (http: or https:)
location.port : 포트번호 (80 http, 443 https 인 경우, 브라우저에서 안보여주거나 0 을 표시)
location.assign : 새 웹문서 로딩
location.search : 쿼리문자열
location.reload() : 새로고침
■ history
※ 본 예제는 history1 ~ history3 3개의 html 파일 필요, title 과 h1 주목.
'브라우저가 기억하고 있는' 이전/이후 페이지로 이동 (새로 request를 발생하는 것이 아니다)
history.back() 이전 페이지 이동
history.forward() 이후 페이지 이동
history.go(숫자) 이동 숫자, -2 를 입력하면 2단계 이전 방문
history.length 방문기록에 저장된 목록의 개수를 반환
history object 로 이동시는 새로운 request 를 발생시키는 것이 아니라
브라우저가 기억하는 사이트를 표시하는 것이기 때문에
form에 직전에 입력한 것까지도 그대로 복원된다. (password, file 등은 브라우저 별로 예외)
* navigator 객체
현재 방문자가 사용하는 브라우저 정보와 운영체제 정보 제공
navigator.cookieEnabled 쿠키 사용여부 true/false
navigator.appName 브라우저 이름. (그런데 대체로 Netscape 리턴) 이정보는 믿지 말자.
navigator.appCodeName 브라우저 코드이름 Mozilla (크롬, FF, IE, Safari, Opera 등..)
navigator.product 브라우저 엔진 이름, 대부분 Gecko 일텐데 믿지 말자..
navigator.userAgent user-agent 헤더 (서버로 전송됨)
navigator.platform OS 정보
navigator.language 언어정보
navigator.online online 상태 여부
navigator.javaEnabled() Java 사용 여부
- 위 정보들은 신뢰해선 안된다. 즉 위 정보로 브라우저 정보 파악하면 곤란
