📝 window 객체

브라우저 창 자체를 나타내는 객체

window 객체는 자바스크립트의 최상위 객체이며 DOM, BOM으로 분류된다.

• DOM(Document Object Model) : document
• BOM(Browser Object Model) : location, history, screen, navigator

window 객체는 창 자체를 나타내고 있으므로 어디서든 접근이 가능하다.
그래서 window라는 객체 호출부를 생략할 수 있다.

ex) window.alert() == alert() 

💡 window.setTimeout(함수, 지연시간(ms))

지연 시간 후 함수가 1회 실행

🔎 코드로 살펴보기

• html

    <button id="btn1">setTimeout() 확인</button>

• js

// window.setTimeout(함수, 지연시간(ms))
document.getElementById("btn1").addEventListener("click", function(){
    
    setTimeout(function(){
       alert("3초 후 출력 확인!"); 
    }, 3000 );

})

🔎 출력 화면

-> 버튼을 누른 뒤 3초 후에 알림창이 뜨는 모습을 볼 수 있다.

---

💡 window.setInterval(함수, 지연시간(ms))

지연 시간 마다 함수 실행

🔎 코드로 살펴보기

    <div id="clock">10 : 45 : 48</div>

• js

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초에 한 번씩 함수가 실행되어 시간이 흐르는 모습이다.

---

💡 window.clearInterval( setInterval이 저장된 변수 )

🔎 코드로 살펴보기

    <button id="stop">STOP!!</button>

• js

// clearInterval
document.getElementById("stop").addEventListener("click", function(){
    clearInterval(interval);
})

🔎 출력 화면

-> 'STOP' 버튼을 누르면 시간이 멈춘다.