브라우저 객체 모델(BOM)

* 브라우저 객체 모델(BOM)

- 브라우저에 내장된 객체를 '브라우저 객체'라고 함.

- window는 브라우저 객체의 최상위 객체가 됨.

- window 객체에는 하위 객체를 포함하고 있음.

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

 

[window 객체]

 

- window 객체 메서드 종류

 

종류	설명
open()	새 창을 열 때 사용함.
alert()	경고 창을 띄움.
prompt()	질의응답 창을 띄움.
confirm()	확인/취소 창을 띄움.
moveTo()	창의 위치를 이동시킬 때 사용함.
resizeTo()	창의 크기를 변경시킬 때 사용함.
setInterval()	일정 간격으로 지속적으로 실행문을 실행시킬 때 사용함.
setTimeout()	일정 간격으로 한 번만 실행문을 실행시킬 때 사용함.

 

 

1) open()

- open() 메서드는 새 브라우저 창을 띄울 때 사용함.

- 사이트에서 팝업 창을 띄울 때 자주 사용되는 window 객체 메서드.

- 기본형

 

window.open("url 경로","창 이름","옵션 설정")                     팝업 창의 크기, 높이, 위치, 도구상자 노출 여부 등을 설정

 

- 예)

 

window.open(http://easy.com/","pop1","width=400,height=500,left=50,top=10,scrollbars=no,toolbars=no,location=no");

 

- open() 메서드의 속성

 

속성	설명
width	창의 너비를 설정함.
height	창의 높이를 설정함.
left	창의 좌·우 수평 위치를 설정함.
top	창의 상·하 수직 위치를 설정함.
location	창의 url 주소 입력 영역 노출 여부를 결정함. (숨김 = no, 노출 = yes)
status	창의 상태 영역 노출 여부를 결정함. (숨김 = no, 노출 = yes)
scrollbars	창의 스크롤 막대 노출 여부를 결정함. (숨김 = no, 노출 = yes)
toolbars	창의 도구상자 노출 여부를 결정함. (숨김 = no, 노출 = yes)

 

 

 

2) alert()

- alert() 메서드는 경고 창을 띄울 때 사용함.

- windows.alert() 메서드는 window 객체를 따로 작성하지 않아도 사용할 수 있음.

- 기본형

 

alert("경고 메시지")

 

 

3) prompt()

- 질의응답 창을 띄울 때 사용함.

- window 객체를 따로 작성하지 않아도 사용할 수 있음.

- 기본형

 

prompt("질의 내용","기본 답변");

 

- 예)

 

prompt("당신의 연령은?", "0");

 

 

 

3) confirm()

- 확인/취소 창을 띄울 때 사용함.

- windoow 객체를 따로 작성하지 않아도 사용할 수 있음.

- 기본형

 

confirm("질의 내용");

 

 

 

4) moveTo()

- 브라우저 창의 위치를 이동시킬 때 사용함. (단, 크롬, 오페라 브라우저에서는 정상적으로 작동하지 않음.)

- 기본형

 

moveTo(x의 위칫값, y의 위칫값);   // x의 위칫값 xpx, y의 위칫값 ypx로 이동함.

 

 

 

5) resizeTo()

- 브라우저 창의 너비와 높이를 바꿀 때 사용함. (단, 크롬, 오페라 브라우저에서는 정장적으로 작동하지 않음.)

- 기본형

 

resizeTo(너빗값, 높잇값);

 

 

 

6) setInterval() / clearInterval()

- setInterval() 메서드는 일정한 시간 간격으로 스크립트 실행문을 반복하여 실행시킬 때 사용함.

- 즉, 일정한 간격에 자동으로 사진이 바뀌는 사진첩을 만든다거나 자동으로 흐르는 슬라이드 배너를 만들 때 사용함.

- clearInterval() 메서드는 setInterval() 메서드를 사용하여 일정한 시간을 간격으로 계속 반복해 실행되는 것을 취소하고자 할 때 사용함.

- setInterval() 메서드를 사용할 때, 시간 간격은 1/1000초 단위인 밀리초 단위로 작성해야 함.

- 기본형

 

var 참조 변수=setInterval("스크립트 실행문", 시간 간격);

 

 

clearInterval(참조 변수);

 

- 예)

 

var t=setInterval("i++",3000);    // 3초마다 변수 i의 값이 1씩 증가함.

 

clearInterval(t);

 

 

7) setTimeout() / clearTimeout()

- setTimeout() 메서드는 일정한 간격으로 스크립트 실행문을 한 번만 실행시킴.

- 하지만, setTimeout() 메서드도 재귀 함수 호출을 이용하면 setInterval() 메서드처럼 사용할 수 있음.

- clearTimeout() 메서드는 setTimeout() 메서드를 사용하여 일정한 시간 간격으로 한 번 실행할 예정인 실행문을 취소하고자 할 때 사용함.

- setTimeout() 메서드를 사용할 때, 시간 간격은 1/1000초 단위인 밀리초 단위로 작성해야 함.

- 기본형

 

var 참조 변수=setTimeout("스크립트 실행문", 시간 간격);

 

 

clearTimeout(참조 변수);

 

- 예)

 

var t=setTimeout("console.log(++i);",5000);   // 5초 간격 이후 단 한 번만 변수 i의 갑을 1 증가시킴.

 

 

clearTimeout(t);

 

 

 

[screen 객체]

 

- screen 객체는 사용자의 모니터 정보(속성)를 제공하는 객체임.

- 가령, 모니터의 너비나 높이는 컬러 표현 bit를 반환함.

- 기본형

 

screen.속성;

 

 

- screen 객체의 속성 종류

 

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

 

 

[location 객체]

 

- location 객체는 사용자 브라우저의 주소 창에 url에 대한 정보(속성)와 새로 고침 기능(메서드)을 제공하는 객체임.

- 기본형

 

location.속성; 또는 location.메서드()

 

 

- location 객체 속성 / 메서드 종류

 

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

 

 

[history 객체]

 

- history 객체는 사용자가 방문한 사이트 중 이전에 방문한 사이트와 다음 방문한 사이트로 다시 돌아갈 수 있는 속성과 메서드를 제공함.

- 기본형

 

history.메서드; 또는 history.속성;

 

 

- history 메서드 / 속성 종류

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

 

 

[navigator 객체]

 

- navigator 객체는 현재 방문자가 사용하는 브라우저 정보와 운영체제의 정보를 제공하는 객체임.

- 기본형

 

navigator.속성;

 

 

- navigator 속성

 

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

 

 

내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)