[JavaScript] BOM(Browser Object Model)

BOM(Browser Object Model)

BOM은 브라우저를 기반으로 제공되는 자바스크립트의 내장객체이다.
BOM은 웹 브라우저 기능 요소를 직접 제어할 수 있는 객체의 모음이다.
객체 모델의 종류 : window(상위 객체), navigator, location, history, document 등

---

1) window 객체

window 객체는 브라우저 창(window)를 객체로 표현하여 브라우저 창과 관련된 정보와 동작을 제어하는 다양한 메소드와 속성을 제공한다.

window 객체는 자바스크립트의 최상위객체이자 전역객체이며 모든 객체가 소속된 글로벌 객체이다.
→ JSC(Javascript core), DOM, BOM을 포함한 전역 객체이다.

window 객체의 프로퍼티나 메소드는 window를 생략하고 바로 사용할 수 있다. ex) alert("메시지")

 

 

window.alert(message) : 경고창을 이용하여 메세지를 출력하는 메소드 

→ window 객체를 생략해도 메소드 호출이 가능하다. 

window.alert("경고창을 이용하여 메세지를 출력하는 메소드");
//window 객체 생략 가능
alert("경고창을 이용하여 메세지를 출력하는 메소드");

 

window.prompt(message[, value]) : 입력창을 이용하여 사용자로부터 문자값을 입력받아 반환하는 메소드 

var input=prompt("숫자를 입력해 주세요.", 100);
alert("input = "+input);

 

window.confirm(message) : 확인창을 이용하여 사용자로부터 선택값을 반환하는 메소드 
→  확인창에서 [취소]를 선택하면 [false]를 반환하고 [확인]을 선택하면 [true]를 반환한다. 

if(confirm("정말로 삭제 하겠습니까?")) {
	alert("게시글을 삭제하였습니다.");
	} else {
	alert("게시글 삭제를 취소하였습니다.");
}

 

window.open(url[, name][, option]) : 자식 브라우저를 생성하여 웹프로그램을 요청해 실행 결과를 제공받아 출력하는 메소드 
→ option : width, height, top, left, menubar, toolbar, resizable 등 

window.open("http://www.daum.net", "popup", "width=1000, height=640, top=100, left=200");

 

window.close() : 브라우저를 종료하는 메소드

if (confirm("브라우저를 종료 하시겠습니까?")) {
	window.close();
}

---

2) navigatior 객체 

navigatior 객체는 브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 다양한 정보를 저장하는 객체이다.
navigatior 객체는 브라우저 엔진을 객체로 표현하여 프로퍼티와 메소드를 제공한다.

alert(navigator);//[object Navigator]

 

navigator.appName : 브라우저 엔진의 이름을 저장한 프로퍼티 

alert("브라우저 엔진의 이름 = "+navigator.appName);//브라우저 엔진의 이름 = Netscape

 

navigator.appVersion : 브라우저 엔진의 버전을 저장한 프로퍼티 

alert("브라우저 엔진의 버전 = "+navigator.appVersion)

 

navigator.userAgent : 브라우저 엔진을 저장한 프로퍼티 

alert("브라우저 엔진 = "+navigator.userAgent)

 

---

3) location 객체

location 객체는 문서의 주소와 관련된 객체이다.
location 객체는 브라우저에서 url 주소를 입력하는 영역을 객체로 표현하여 프로퍼티와 메소드를 제공한다.
location 객체를 이용하여 윈도우의 문서 URL을 변경할 수 있고, 문서의 위치와 관련해서 다양한 정보를 얻을 수 있다.

 

 

location.toString() : URL 주소를 입력하는 영역의 URL 주소를 반환하는 메소드

alert(location);//http://localhost:8000/web/js/32_location.html

 

location.href : location 객체의 url 주소를 저장한 프로퍼티 
→ loaction 객체의 href 속성값을 변경하면 브라우저의 URL 주소가 속성값으로 변경되며 변경된 URL 주소의 웹프로그램을 요청하여 실행결과를 제공받아 출력할 수 있다. (페이지 이동) 

//3초 후에 페이지를 "http://www.daum.net"로 이동하는 기능을 구현
setTimeout(function() {
    location.href="http://www.daum.net"
}, 3000);

 

location.reload() : 브라우저가 현재 요청한 URL 주소의 웹프로그램을 재요청하는 메소드 

//1초 간격으로 페이지를 새로고침하여 최신 정보를 표시
setInterval(function() {
	location.reload();
},1000);

 

---

4) history 객체

history 객체는 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체이다.
브라우저의 히스토리를 객체로 표현하여 프로퍼티와 메소드를 제공한다.

alert(history);//[object History]

 

history.back() : 이전 페이지로 이동하는 메소드
history.go(number) : 원하는 페이지로 이동하는 메소드
history.forward() : 다음 페이지로 이동하는 메소드

setTimeout(function() {
	//history.back();//history.go(-1);
	//history.forward();//history.go(1);
	history.go(0);//location.reload() 메소드와 동일
}, 3000);

 

---

4) document 객체

Document 객체는 웹 페이지 그 자체를 의미한다.
웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야한다.
Document 객체는 요청 웹프로그램의 실행결과를 브라우저에 출력하는 영역을 객체로 표현하여 프로퍼티와 메소드 제공한다.

alert(document);//[object HTMLDocument]

 

document.write(html) : 매개변수로 HTML 태그를 전달받아 응답영역에 출력하는 메소드 

document.write("<p>document.write() 메소드로 출력된 내용입니다.</p>");