WEB/JavaScript

[JavaScript] BOM - screen, loaction, history

developer of the night sky 2023. 10. 5. 17:38

window 자식 객체로는 history, screen, navigator, location, document가 있다.

이 중 screen, location, history 객체를 알아보고자 한다.

🔻screen 객체🔻

  • 화면 정보를 제공한다.

속성

  • availWidth, availHeight : 작업표시줄을 제외한 화면크기
<body>
    
    <script>
        console.log(window.screen.availWidth);
        console.log(window.screen.availHeight);
        console.log(window.screen.colorDepth);  //24bit color를 제공한다.
        console.log(window.screen.orientation); //모니터 회전각도를 알 수 있다.
    </script>

</body>

🔻location 객체🔻

  • 현재 창의 페이지주소와 관련된 객체를 참조한다.
<body>
    <form name="form1">
        <input type="button" value="버튼" name="btn1">
    </form>

    <script>
        window.document.form1.btn1.onclick=m1;

        function m1() {
            //현재 페이지주소를 콘솔에 보여준다.
            //console.log(window.location.href);

            //페이지 이동(프로퍼티)
            //window.location.href = 'https://naver.com';

            //페이지 이동(메소드)
            //window.location.assign('https://google.com');
            
            //새로고침
            window.location.reload();
        }
    </script>
</body>

 

🔶전역이벤트로 단축키 만들기

<body>
    <ul>
        <li><a href="https://naver.com">네이버(n)</a></li>
        <li><a href="https://google.com">구글(g)</a></li>
        <li><a href="https://daum.net">다음(d)</a></li>
    </ul>

    <script>
        //전역 이벤트 : 어떤 상황에서 행동하든 항상 발생하는 이벤트
        window.onkeydown = m2;

        function m2() {
            // alert(event.keyCode);
            if (event.keyCode == 78) {
                window.location.href = 'https://naver.com';
            } else if (event.keyCode == 71){
                window.location.href = 'https://google.com';
            } else if (event.keyCode == 68){
                window.location.href = 'https://daum.net';
            }
        }
    </script>

</body>

화면에서 n, g, d를 누르면 네이버, 구글, 다음으로 접속된다.

🔻history 객체🔻

  • 브라우저가 방문한 탐색 기록을 접근한다.

메소드

  • back : 이전페이지로 이동
  • forword : 다음페이지로 이동
  • go(위치) : -1(이전페이지), 1(다음페이지) ...
<body>
    <form name="form1">
        <input type="button" value="뒤로가기" name="btn1">
        <input type="button" value="앞으로가기" name="btn2">
        <input type="button" value="뒤로가기(2단계)" name="btn3">

    </form>

    <script>
        window.document.form1.btn1.onclick = m1;
        window.document.form1.btn2.onclick = m2;
        window.document.form1.btn3.onclick = m3;

        function m1() {
            //뒤로가기
            window.history.back();
        }
        function m2() {
            //앞으로가기
            window.history.forward();
        }
        function m3() {
            //뒤로가기(2단계)
            //현재페이지 > 네이버 > 구글 > 현재페이지
            window.history.go(-2);	//네이버로 이동
        }
    </script>

</body>

 

저작자표시 (새창열림)