[JavaScript] 객체 - 4️⃣ Window 객체 & Window 객체 함수, setTimeout(), setInterval(), clearTimeout(), clearInterval()

728x90

SMALL

1. Window 객체

웹 브라우저의 창이나 탭을 표현하기 위한 객체들이며 웹 브라우저는 window 객체를 이용하여 브라우저 창을 표현할 수 있음

2. Window 객체 메서드

alert(): 경고 대화 상자를 표시
confirm(): 사용자가 응답해야 하는 대화 상자를 표시
prompt(): 사용자가 명령 대화상자에 입력하는 텍스트를 반환
setTimeout(): 일정 시간이 지난 후 매개변수로 제공된 함수를 실행(밀리초)
clearTimeout(setTimeout()함수의 변수명): 일정 시간후에 일어날 setTimeout()함수를 취소함

const 함수명 = function(){
        실행문;
        ...
    }

    const st = setTimeout(함수명, 밀리초);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>setTimeout</title>
</head>
<body>
    <h2>setTimeout</h2>
    <script>
        const hello = function(){
            alert('안녕하세요. Javascript!')
        }
        const st = setTimeout(hello, 5000)  // 5초있다가 alert

        // clearTimeout(st);
        
    </script>
</body>
</html>

setInterval(): 일정 시간 마다 매개변수로 제공된 함수를 계속 실행
clearInterval(setInterval()함수의 변수명): 일정 시간마다 일어날 setInterval()를 취소

const 함수명 = function(){
        실행문;
        ...
    }

    const st = setInterval(함수명, 밀리초);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>setInterval</title>
</head>
<body>
    <h2>setInterval</h2>
    <script>
        const hello = function(){
            console.log('안녕하세요, Javascript')
        }

        const si = setInterval(hello, 3000);  // 3초마다 hello 함수 실행

        const clearInter =function(){
            clearInterval(si)
            console.log('hello()가 중지되었음!')	 // 멈춤

        }
    </script>
    <p><button onclick="clearInter()">중지</button></p>  // 버튼을 누르면 clearInter 실행
</body>
</html>

MDN: window

https://developer.mozilla.org/ko/docs/Web/API/Window

Window - Web API | MDN

Window 인터페이스는 DOM 문서를 담은 창을 나타냅니다. document 속성이 창에 불러온 DOM 문서를 가리킵니다.

developer.mozilla.org

728x90

LIST

'Web > JavaScript' 카테고리의 다른 글

[JavaScript] 객체 - 7️⃣ history 객체 & history 객체 함수 (0)	2023.04.12
[JavaScript] 객체 - 6️⃣Location 객체 & Location객체 함수 (0)	2023.04.12
[JavaScript] 객체 - 3️⃣Date 객체 & Date 객체 함수 (0)	2023.04.11
[JavaScript] 객체 - 2️⃣String 객체 & String객체 함수 (0)	2023.04.11
[JavaScript] 객체 - 1️⃣Math 객체 & Math 객체 함수 (0)	2023.04.11