브라우저 창 자체를 나타내는 객체
window 객체는 자바스크립트의 최상위 객체이며 DOM, BOM으로 분류된다.
- DOM(Document Object Model) : document
- BOM(Browser Object Model) : location, history, screen, navigator
window 객체는 창 자체를 나타내고 있으므로 어디서든 접근이 가능하다.
그래서 window라는 객체 호출부를 생략할 수 있다.
ex) window.alert() == alert()
지연 시간 후 함수가 1회 실행
<button id="btn1">setTimeout() 확인</button>
// window.setTimeout(함수, 지연시간(ms))
document.getElementById("btn1").addEventListener("click", function(){
setTimeout(function(){
alert("3초 후 출력 확인!");
}, 3000 );
})
-> 버튼을 누른 뒤 3초 후에 알림창이 뜨는 모습을 볼 수 있다.
지연 시간 마다 함수 실행
<div id="clock">10 : 45 : 48</div>
let interval; // setInterval을 저장하기 위한 전역 변수
// setInterval(함수, 지연시간(ms))
function clockFn(){
const clock = document.getElementById("clock");
clock.innerHTML = currentTime(); // 현재 시간 화면에 출력
// 지연 시간 마다 반복(첫 반복도 지연 시간 후에 시작)
// -> 페이지 로딩 후 1초 후부터 반복(지연 -> 함수 -> 지연 -> 함수)
interval = setInterval(function(){
clock.innerHTML = currentTime();
}, 1000);
}
// 현재 시간 문자열로 변환 함수
function currentTime(){
const now = new Date(); // Thu Jun 22 2023 11:09:52 GMT+0900 (한국 표준시)
let hour = now.getHours();
let min = now.getMinutes();
let sec = now.getSeconds();
if(hour < 10) hour = "0" + hour;
if(min < 10) min = "0" + min;
if(sec < 10) sec = "0" + sec;
return hour + " : " + min + " : " + sec;
}
clockFn(); // 함수 호출
-> 1초에 한 번씩 함수가 실행되어 시간이 흐르는 모습이다.
<button id="stop">STOP!!</button>
// clearInterval
document.getElementById("stop").addEventListener("click", function(){
clearInterval(interval);
})
-> 'STOP' 버튼을 누르면 시간이 멈춘다.