[JS] 브라우저 객체 모델

브라우저 객체란?

브라우저에 내장된 객체를 브라우저 객체라고 합니다.

window는 브라우저 객체의 최상위 객체이며, window 객체에 하위 객체가 포함되어있습니다.

즉 계층적 구조로 이루어져 있으며, 이를 브라우저객체모델(BOM, Browser Object Model)이라고 합니다.

 

---

 

Window객체

window객체의 메서드 종류

종류	설명
open("URL", "새창이름", "새창옵션")	URL 페이지를 새창으로 나타냅니다
alert(data)	경고창을 나타내고 데이터를 보여줍니다. 방문자가 [확인]버튼을 누르면 alert()를 사용한다음 위치의 코드를 수행합니다.
prompt("질문", "답변")	질문과 답변으로 질의 응답 창을 나타냅니다.
confirm("질문 내용")	질문내용으로 확인이나 취소창을 나타냅니다. [확인]버튼을 누르면 true를 반환하고, [취소]버튼을 누르면 false를 반환합니다.
moveTo(x, y)	지정한 새창의 위치를 이동합니다.
resizeTo(width, height)	지정한 새창의 크기를 변경합니다.
setInterval(function() {자바스크립트코드), 일정시간간격)	지속적으로 일정한 시간 간격으로 함수를 호출하여 코드를 실행합니다.
setTimeout(function() {자바스크립트코드), 일정시간간격)	단 한번 일정한 시간 간격으로 함수를 호출하여 코드를 실행합니다.

 

setInterval() / clearinterval()

setInterval() 메서드는 코드를 일정시간 간격으로 반복실행

clearInterval() 메서드는 setInterval()메서드를 취소합니다.

 

setTimeout() / clearTimeout()

setTimeout()메서드는 일정시간이 지나면 코드를 실행하고 종료합니다.

setTimeout()메서드를 조금만 응용하여 재귀호출을 하면 setInterval()메서드 처럼 사용할 수도있습니다.

clearTimeout()메서드는 setTimeout()메서드를 제거합니다.

 

 

---

 

Screen객체

사용자의 모니터 정보(속성)을 제공하는 객체입니다.

 

Screen 객체의 속성 종류

종류	설명
screen.width	화면의 너빗값을 반환합니다.
screen.height	화면의 높이값을 반환합니다.
screen.availWidth	작업표시줄을 제외한 화면의 너빗값을 반환합니다.
screen.availHeight	작업표시줄을 제외한 화면의 높이값을 반환합니다.
screen.colorDepth	사용자 모니터가 표현가능한 컬러 bit을 반환합니다.

 

---

 

Location 객체

사용자 브라우저와 관련된 속성과 메서드를 제공하는 객체입니다.

 

location 객체의 속성 종류

종류	설명
location.href	주소영역의 참조주소를 설정하거나 URL을 반환합니다.
location.hash	URL의 해시값(#에 명시된 값)을 반환합니다.
location.hostname	URL의 호스트이름을 설정하거나 반환합니다.
location.host	URL의 호스트이름과 포트번호를 반환합니다.
location.protocol	URL의 프로토콜을 반환합니다.
location.search	URL의 쿼리(요청값)을 반환합니다.
location.reload()	마치 브라우저에서 F5를 누른것 처럼 새로고침합니다.

 

---

 

History 객체

사용자가 방문한 사이트의 기록을 남기고,

이전 방문 사이트와 다음 방문 사이트로 다시 돌아갈 수 있는 속성과 메서드를 제공합니다.

 

history 객체의 속성 종류

종류	설명
history.back()	이전 방문 사이트로 이동합니다.
history.forward()	다음 방문 사이트로 이동합니다.
history.go(이동 숫자)	이동숫자에 -2를 입력하면 2단계 이전의 방문사이트로 이동합니다
history.length	방문기록에 저장된 목록의 개수를 반환합니다.

 

---

 

Navigator 객체

현재 방문자가 사용하는 브라우저 정보와 운영체제 정보를 제공하는 객체입니다.

 

navigator 객체의 속성 종류

종류	설명
navigator.appCodeName	현재 브라우저의 코드명을 반환합니다. 현 시점의 모든 브라우저는 "Mozilla"를 반환합니다.
navigator.appName	현재 브라우저의 이름을 반환합니다. 현 시점의 모든 브라우저는 "Netscape"를 반환합니다.
navigator.appVersion	현재 브라우저의 버전정보를 반환합니다. 현 시점의 모든 브라우저는 "5.0(Windows)을 반환합니다."
navigator.language	현재 브라우저가 사용하고 있는 언어를 반환합니다. 한국어를 사용할 경우에는 "ko"를 반환합니다.
navigator.product	현재 브라우저의 엔진 이름을 반환합니다. 크롬의 경우는 "Gecko"를 반환합니다.
navigator.platform	현재 컴퓨터의 운영체제 정보를 제공합니다. 운영체제가 윈도우이고 시스템 종류가  64비트라도 브라우저가 32비트로 설치되었따면 "Win32"라고 나타냅니다.
navigator.onLine	온라인상태 여부에 대한 정보를 제공합니다. 만일 인터넷이 정상적으로 연결 되어있는 상태라면 true값을 반환합니다.
navigator.userAgent	브라우저와 운영체제의 종합정보를 제공합니다.

 

출처 : 이지스퍼블리싱 - 자바스크립트 제이쿼리 입문 (전면개정판)