JavaScript BOM

Let's Just Go·2022년 6월 27일

JavaScript

목록 보기

9/10

JavaScript

BOM

Window Popup

팝업을 통해 새 창을 열 수 있게 해주는 기능
window.open()함수를 통해 새창을 열 수 있음
광고나 공지사항 등의 새 창을 띄우기 위해 사용하면 좋을듯…?

Code

<!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>Document</title>
</head>

<body>
    <button id="popup">새창 열기</button>

    <script>
        const $popup = document.getElementById('popup');
        $popup.onclick = function () {
            window.open('https://www.naver.com', '네이버창', 'width =  300, height = 300 left = 100, top = 100');
            // 이벤트가 발생했을 때 새창을 열 수 있음
        }
    </script>
</body>

</html>

Window Interval

setInterval(실행함수, 인터벌 시간);
- Start Interval
clearInterval(변수);
- Stop Interval

Code

<!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>Document</title>
</head>

<body>

    <button class="stopInterval">STOP</button>
    <script>
        // setInterval() : 일정 시간마다 함수를 반복 실행 
        // 매개변수로 (실행 함수, 인터벌 시간(밀리초))이 들어감
        function a() {
            console.log(1);
        }
        const stop = setInterval(a, 500);
        // 함수와 500밀리초 간격으로 실행 
        // console에 1을 출력하는 것을 0.5초마다 반복

        document.querySelector('.stopInterval').onclick = function () {
            clearInterval(stop);
            // interval을 멈추고자 하면 clearInterval을 통해서 실행 
            // 이벤트로 stop이라는 버튼을 누르면 interval이 종료
        }
    </script>
</body>

</html>

Window Timeout

setTimeout(함수, 특정시간);
- 사용자가 지정한 시간이 지난 후 특정 함수가 발동할 수 있음
clearTimeout(변수);
- Timeout 기능이 실행되지 않도록 하는 함수

Code

<!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>Document</title>
</head>

<body>
    <h3>
        5초 뒤 타임함수가 실행되는데 이 버튼을 누르면 실행되지 않습니다.
    </h3>

    <button class="stopTime">취소</button>

    <script>

        function a() {
            alert('5초 후 경고창 출력');
        }

        const stop = setTimeout(a, 5000);

        const $stopTime = document.querySelector('.stopTime');
        $stopTime.onclick = function() {
            clearTimeout(stop);
        }
    </script>
</body>

</html>

Navigator

JS에 내장되어 있는 객체이며 위도와 경도를 얻을 수 있음
navigator.geolocation.getCurrentPosition(성공 시 함수, 실패 시 함수);
- 성공했을 때 position이라는 매개값을 받아서 위도와 경도를 출력 할 수 있음

Code

<!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>Document</title>
</head>

<body>
    <script>
        // 성공 실행할 콜백함수
        function success(position) {
            // position이라는 변수를 받음
            console.log(position);
            console.log('위도 : ' + position.coords.latitude);
            console.log('경도 : ' + position.coords.longitude);
            // position이라는 것을 받아와서 위도 경도 확인
        }

        // 실패 시 실행할 콜백 함수
        function fail(error) {
            alert('위치 정보를 얻는데 실패했습니다. 위치 정보를 승인해주세요.')
            console.log(error);
        }

        // 즉시 실행 함수
        (function () {
            navigator.geolocation.getCurrentPosition(success, fail);

        }());
    </script>

</body>

</html>

Let's Just Go

안녕하세요! 공부한 내용을 기록하는 공간입니다.

이전 포스트

JavaScript Form & Date Object

다음 포스트

JavaScript BOM

JavaScript

JavaScript

BOM

Window Interval

Window Timeout

Navigator

JavaScript Form & Date Object

JavaScript Cookie

0개의 댓글