window 브라우저 객체 open, alert, prompt, confirm, setInterval, setTimeout, clearInterval, clearTimeout 설명 및 사용예제 : Programming Story

오늘은 Javascript 브라우저 객체에 대해 알아보겠다. 브라우저에 내장된 객체를 우리는 브라우저 객체라고 하는데 그 중 오늘 알아볼 것은 window 객체이다. window는 브라우저 객체의 최상위 객체로 open, alert, prompt, confirm, moveTo, resizeTo, setInterval, setTimeout 등의 메소드를 사용할 수 있다.

하나하나 차근차근 알아보도록 하자.

1. open()

open("URL", "새 창 이름", "새 창 옵션")

open() 메소드를 사용하면 지정한 URL 페이지를 새 브라우저 창에 나타낼 수 있다.

URL, 새 창으로 띄우려는 이름, 띄우려는 새 창의 옵션 순서대로 파라미터를 적용시킬 수 있으며, 새 창을 띄울 수 있는 옵션은 아래와 같다.

width (새 창의 너비)

height (새 창의 높이)

left (새 창의 X축 위치)

top(새 창의 Y축 위치)

scrollbars (no일 경우 숨김, yes일 경우 노출)

위 옵션을 적용해서 예시로 open() 메소드를 사용해보면 아래와 같다.

window.open("http://www.naver.com/", "naver", "width=300, height=500, left=10, top=20, scrollbars=no");

반대로

window.close()

를 하게 되면 현재 창을 닫을 수 있다.

2. alert()

경고 메세지 창을 나타낼 때 우리는 alert() 메소드를 사용한다.

흔히 우리의 웹 서핑 중에서도 마주치는

"비밀번호는 최대 5자리 이상이어야 합니다"와 같은 alert 메세지를 띄울 때 사용한다. 우리의 일상생활에서도 느꼈겠지만 alert 창이 띄워지면 반드시 확인버튼을 눌러야 다음으로 넘어가게 된다.

javascript 코드에서도 마찬가지이다. alert 창 화면에서 "확인" 버튼을 클릭해야 alert() 메세지 이후의 코드를 실행해주는 것이다,

3. prompt()

prompt는 질의응답 창을 띄울 때 사용한다. alert와 prompt 메소드는 window.alert, window.prompt와 같이 window 객체를 작성하지 않아도 그 자체로 사용할 수 있다.

prompt 메서드의 형식은

prompt("질문", "기본 default 답변");

으로 쓸 수 있다.

예를 들어,

prompt("당신의 나이는?", "20");

으로 prompt 창을 띄우면 기본 나이로 20이 보이나 사용자가 수정을 할 수 있고 수정 후 확인 버튼을 누르면 입력한 답변을 return 해주는 형식인 것이다.

4.confirm()

confirm은 확인/취소 창을 나타낼 떄 사용한다.

confirm("확인을 누르면 입력한 내용이 모두 삭제됩니다. 정말로 삭제하시겠습니까?");

위와 같이 confirm 메서드를 사용하여 [확인] / [취소] 버튼을 통해 return 값이 달라진다.

사용자가 확인 버튼을 클릭하면 true가 반환되고, 취소 버튼을 클릭하면 false가 반환된다.

5.setInterval()/ clearInterval()

일정 시간 간격으로 코드를 반복실행하고 싶다면 setInterval() 메서드를, 해당 메서드를 취소하고 싶으면 clearInterval() 메서드를 사용할 수 있다.

시간 간격은 1/1000초 단위(ms)로 작성을 해야한다. 즉 5초 간격으로 설정하려면 5 자체가 아닌, 5000으로 작성해야 정상적으로 반영이 된다.

5초 간격으로 변수 i 의 값을 2씩 증가시키는 코드를 작성해보겠다.

var intV=setInterval(function(){i++;}, 5000);

위와 같은 코드를 통해 i의 변수가 5초마다 1씩 증가하며, 특정 시간 이후에 해당 자동증가 함수를 취소하기 위해서는 위에서 언급한 clearInterval() 메서드를 사용해주면 된다.

clearInterval 함수의 파라미터에는 취소하고 싶은 변수를 사용하면 된다.

위에서는 intV 변수에 setInterval 함수를 적용시켜주었으니

clearInterval(intV);

와 같이 적어주면 된다.

6. setTimeout() / clearTimeout()

setInterval(), clearInterval() 함수에서 일정 시간 동안 코드를 반복 실행하고 중지했다면 setTimeout()과 clearTimeout()은 일정 시간이 지나면 코드를 실행하고 종료할 때 사용할 수 있는 메서드이다.

setInterval(), clearInterval()과 문법은 동일하며, 다른 점은 setInterval은 해당 시간 간격으로 반복 코드 재생, setTimeout은 해당 시간 간격으로 코드를 실행하는 것이다.

동일하게 ms 단위로 시간을 작성해주어야 하며, 이번에는 3초 간격으로 변수 i의 값을 1씩 증가시키고 이후 코드를 종료하는 코드를 작성해보도록 하겠다.

var t=setTimeout(function(){i++;}, 3000);

//이후 취소
clearTimeout(t);

이렇게 window 브라우저 객체와 그 메서드를 잘 활용하면 추가 개발할 필요 없이 다양한 기능들을 편리하게 구현할 수 있다.