본문 바로가기

JavaScript

19. window 객체

Web Api 객체
  • BOM(Browser Object Model): 비표준
window 객체
  • 웹 브라우저의 창이나 탭을 표현하기 위한 객체들이며 웹 브라우저는 window 객체를 이용하여 브라우저 창을 표현할 수 있음
    • window.alert()
    • window.confirm()
    • window.prompt()
window 객체의 메소드
setTimeOut()
  • 일정 시간이 지난 후 매개변수로 제공된 함수를 실행
const 함수명 = function(){
    실행문;
    ...
}

const st = setTimeOut(함수명, 밀리초)
clearTimeout()
  • 일정 시간후에 일어날 setTimeOut()를 취소함
// setTimeOut()
const 함수명 = function(){
    실행문;
    ...
}

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

//clearTimeout()
clearTimeout(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초

    </script>    
</body>
</html>

5초 뒤에 함수 실행

clearTimeout() 예제
<!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>
    <button onclick="clearTimeout()">중지</button>
    <script>
        const hello = function() {
            alert("안녕하세요. JavaScript!");

        }

        const st = setTimeout(hello, 5000); // 5초

        clearTimeout(st);

    </script>    
</body>
</html>

clearTimeout()으로 인해 함수가 실행되지 않음

setInterval()
  • 일정 시간마다 매개변수로 제공된 함수를 실행
const 함수명 = function(){
    실행문;
    ...
}

const st = setInterval(함수명, 밀리초);
clearInterval()
  • 일정 시간마다 일어날 setInterval()를 취소함
// setInterval()
const 함수명 = function(){
    실행문;
    ...
}

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

// clearInterval
clearInterval(st)
setInterval(), clearInterval() 예제
<!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);

        const clearInter = function(){
            clearInterval(si);
            console.log("hello()가 중지되었음!");
        }
    </script>
    <p><button onclick="clearInter()">중지</button></p>
</body>
</html>

3초에 한번씩 "안녕하세요. JavaScript!"를출력함
중지 버튼을 누르면 더 이상 출력하지 않음

'JavaScript' 카테고리의 다른 글

21. Location 객체  (0) 2023.04.07
20. form 객체  (0) 2023.04.07
18. Date 객체  (0) 2023.04.07
17. String 객체  (0) 2023.04.07
16. Math 객체  (0) 2023.04.07