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

JAVASCRIPT / BROWSER OBJECT MODEL

 

BOM

 

웹 브라우저와 소통하기 위한 웹 브라우저 모델 

자바 스크립트의 모든 객체, 함수, 변수들은 window객체의 멤버가 된다.

window는 생략이 가능하다. ( window.alert()  ->  alert() )

---

 

BOM의 여러 객체들

window : 웹 브라우저의 최상위 객체 (생략가능)

window.screen: 웹 브라우저가 알고 있는 모니터에 관한 정보

window.history: 웹 브라우저의 페이지 이동 내역을 담고 있는 객체

window.location: 현재 웹 브라우저가 보고 있는 위치(페이지)에 관한 객체

window.document: DOM.  html 코드 전체의 내용을 담고 있는 객체

---

 

window size

console.log(window.innerWidth);   // 너비
console.log(window.innerHeight);  // 높이

현재 브라우저의 크기를 나타낸다 (정보를 담고있는)

screen

// 모니터의 해상도와 같은 값이 나온다 
console.log(window.screen.width);
console.log(screen.height);

// 작업표시줄을 제외한 (실질적으로 사용이 가능한) 너비가 나온다.
console.log(screen.availWidth);  
console.log(screen.availHeight);

모니터의 크기를 나타낸다.

alert , prompt, confirm

window.alert('경고');

console.log(window.prompt('메세지 > '));   

console.log('확인 | 취소 ?' , window.confirm('확인 or 취소'));

alert : 안내창을 띄운다 
prompt : 안내창을 띄우고 메시지를 입력할 수 있다. (변수로 사용가능)
confirm : 안내창을 띄우고 확인, 취소를 누른것에 대한 정보를 알 수 있다. (확인 true | 취소 false)

location

console.log(location.href);     // 브라우저가 현재 보고있는 url(href)
console.log(location.hostname); // 웹 사이트 주소
console.log(location.pathname); //현재 페이지의 URI
console.log(location.protocol); // 사용 프로토콜
console.log(location.port);     // 사용 포트번호( 기본 포트번호는 출력 X )

https://comic.naver.com/index 와 같은 url이 있을 때 아래와 같이 값이 나뉜다.

console.log(location.href)     // "https://comic.naver.com/index"

console.log(location.pathname) // "/index"

console.log(location.hostname) // "comic.naver.com"

console.log(location.protocol) // "https:"

console.log(location.port)     //  ""  : 기본 포트 사용시 port 정보 x

location.href = "http://naver.com"  // 네이버로 이동

 

history

history.back(): 뒤로 가기 버튼을 누른 효과
history.forward() : 앞으로 가기 버튼을 누른 효과
history.go(상대적인 거리) : -1은 바로 이전 페이지, +1은 바로 다음 페이지