브라우저에 내장된 객체를 브라우저 객체라고 한다. window는 브라우저 객체의 최상위 객체가 된다. window 객체에는 하위 객체를 포함하고 있다.
즉, 계층적 구조로 이루어져 있으며 이를 브라우저 객체 모델(browser object model)이라고 한다.
window 객체
window는 브라우저 객체의 최상위 객체이며, 아래와 같은 메서드들을 사용할 수 있다.
open()
open() 메서드는 새 브라우저 창을 띄울 때 사용한다. 사이트에서 팝업 창을 띄울 때 자주 사용되는 메서드이다.
open() 메서드의 기본문법은 아래와 같다.
// window.open("url 경로", "창 이름", "옵션 설정");
window.open("pop.html", "pop1", "width=300, height=400, scrollbars=no");
open() 메서드의 옵션 설정에서는 아래와 같은 속성들을 설정할 수 있다.
width : 창의 너비를 설정한다.
height : 창의 높이를 설정한다.
left : 창의 좌우 수평 위치를 설정한다.
top : 창의 상하 수직 위치를 설정한다.
location : 창의 url 주소 입력 영역 노출 여부를 결정한다. (숨김:no, 노출:yes)
status : 창의 상태 영역 노출 여부를 결정한다.
scrollbars : 창의 스크롤 바 노출 여부를 결정한다.
toolbars : 창의 도구상자 노출 여부를 결정한다.
alert()
alert() 메서드는 경고 창을 띄울 때 사용한다. alert() 메서드는 아래의 기본문법과 같이 window 객체를 따로 작성하지 않아도 사용할 수 있다.
// alert("경고 메세지");
alert("일치하지 않습니다.");
prompt()
prompt() 메서드는 질의응답 창을 띄울 때 사용한다. prompt() 메서드도 window 객체를 따로 작성하지 않아도 사용할 수 있다.
// prompt("질의 내용", "기본 답변");
prompt("당신의 나이는?", "0");
confirm()
confirm() 메서드는 확인, 취소 창을 띄울 때 사용한다. window 객체를 따로 작성하지 않아도 사용할 수 있다.
// confirm("질의 내용");
confirm("정말 삭제하시겠습니까?");
confirm 창에서 확인 버튼을 누르면 true를, 취소 버튼을 누르면 false를 반환한다.
moveTo()
moveTo() 메서드는 브라우저 창의 위치를 이동시킬 때 사용한다. 단, 크롬과 오페라에서는 작동하지 않는다.
moveTo() 메서드는 아래의 기본문법과 같이 스크린(모니터)의 왼쪽을 기준으로 x의 위치값과, 위쪽을 기준으로 y의 위치값을 입력한다.
//moveTo(x의 위치값, y의 위치값);
moveTo(100, 200);
resizeTo()
resizeTo() 메서드는 브라우저 창의 너비와 높이를 바꿀 때 사용한다. 단, 크롬과 오페라에서는 작동하지 않는다.
// resizeTo(너비값, 높이값);
resizeTo(200, 300);
setInterval() / clearInterval()
setInterval() 메서드는 일정한 시간 간격으로 실행문을 반복해서 실행시킬 때 사용한다.
즉, 일정한 간격에 자동으로 사진이 바뀌는 사진첩을 만든다거나 자동으로 흐르는 슬라이드 배너를 만들 때 사용한다.
clearInterval() 메서드는 setInterval() 메서드를 사용하여 계속 반복해 실행되는 것을 취소하고자 할 때 사용한다.
즉, 이 메서드는 자동으로 바뀌는 사진첩을 멈추고자 할 때 사용할 수 있다.
setInterval() 메서드의 기본문법은 아래와 같다. 이 때, 시간 간격은 1/1000초 단위인 밀리초 단위로 작성해야 한다. 만약 3초 간격이라면 3000으로 작성해야 한다. 여기서 참조변수는 이 메서드를 제거시킬 때 사용된다.
// var 참조변수 = setInterval("스크립트 실행문", 시간 간격);
var t = setInterval("i++", 3000);
clearInterval() 메서드의 기본문법은 아래와 같다. 이 때, 참조변수는 앞의 setInterval()을 참조하는 변수이다.
// clearInterval(참조변수);
clearInterval(t);
setTimeout() / clearTimeout()
setTimeout() 메서드는 일정한 간격으로 실행문을 한번만 실행시킨다. 하지만 setTimeout() 메서드도 재귀함수 호출을 이용하면 setInterval() 메서드처럼 사용할 수 있다.
clearTimeout() 메서드는 setTimeout() 메서드를 사용하여 한번 실행할 예정인 실행문을 취소하고자 할 때 사용한다.
setTimeout() 메서드의 기본문법은 아래와 같다.
// var 참조변수 = setTimeout("스크립트 실행문", 시간 간격);
var t = setTimeout("console.log(++i);", 5000);
clearTimeout() 메서드의 기본문법은 아래와 같다. 이 때, 참조변수는 앞의 setTimeout() 실행문을 참조하는 변수이다.
// clearTimeout(참조변수);
clearTimeout(t);