자바스크립트 - WINDOW 객체

WINDOW

브라우저 창에 대한 설정을 하는 객체

window 객체는 자바스크립트의 최상위 객체이며 BOM과 DOM으로 나뉜다.

 

BOM

location 객체, navigator 객체, history 객체, screen 객체

 

DOM

document 객체

 

open()

주소값을 열거나 이동하는 객체

 <button onclick='open1();'>open1 버튼</button>
    <button onclick='open2();'>open2 버튼</button>
    <script>
        // window.open('주소', '이름 또는 연결방식', '형태');
        // naver 페이지를 열겟다.
        // open() 의 이름이 같으면 같은페이지에서 페이지가열리고한다.

        // _blank : 새창으로 열기
        // _self : 현재 페이지에서 열기
        function open1(){
            window.open('https://www.naver.com','네이버','_blank', 'width=500', 'height=500');
        }

        function open2(){
            window.open('https://www.naver.com','네이버','_self'); 
        }

 

setTimeOut()

딜레이 이용해 실행하는 명령

<script>
        // setTimeout(함수, delay) : 함수에 실행할 코드작성하고 delay 1초 = 1000;
        // setTimeout 은 딱 한번만 실행하는 객체임

        // 3초 후에 console.log()에 출력하겠다.
       setTimeout(() => {
           console.log("3초후에 작성하는코드입니다.");
       }, 3000);



    </script>

 

setInteval()

setTimeout과다르게 계속해서 실행하는 객체

3초 딜레이 걸었으면 3초마다 실행하는 객체임

   <h1>현재시각</h1>
    <div id="clock">
        <span id='hour'>hh</span> : 
        <span id='min'>mm</span> : 
        <span id="sec">ss</span>
    </div>
    <script>
        // setTimeout(함수, delay) : 함수에 실행할 코드작성하고 delay 1초 = 1000;
        // setTimeout 은 딱 한번만 실행하는 객체임

        // 현재 시간을 나타낸 프로그램 작성해봄
        //0.5초마다 프로그램을 계속 실행하여라
       setInterval(() => {
        let date = new Date();
        let hour = date.getHours();
        let min = date.getMinutes();
        let sec = date.getSeconds();

        document.querySelector('#hour').textContent = hour;
        document.querySelector('#min').textContent = min;
        document.querySelector('#sec').textContent = sec;

       }, 500);
    </script>

 

clearInterval()

setInterval() 을 멈추기 위한 메소드

  <h1>현재시각</h1>
    <div id="clock">
        <span id='hour'>hh</span> : 
        <span id='min'>mm</span> : 
        <span id="sec">ss</span>
    </div>
    <br>
    <button onclick="start();">시작</button>
    <button onclick='stop();'>멈춤</button>
    <script>
        let timer;
        // 현재 시간을 나타낸 프로그램 작성해봄
        //0.5초마다 프로그램을 계속 실행하여라
        function start(){
            timer = setInterval(() => {
                let date = new Date();
                let hour = date.getHours();
                let min = date.getMinutes();
                let sec = date.getSeconds();

                document.querySelector('#hour').textContent = hour;
                document.querySelector('#min').textContent = min;
                document.querySelector('#sec').textContent = sec;
            }, 500);
        }
        
        // setInteval() 을 사용하게되면 새로고침을 하지않는이상 멈출방법이없다
        // 그래서 멈추기위해서는 clearInteval() 이용해서 멈추면된다.
        // clearInteval에 넘겨야할값은 변수로 저장해서 넘기면된다.
        function stop(){
            clearInterval(timer);
        }
        
    </script>

실행전

 

시작 버튼 누른후 

멈춘 버튼 누른후

 

screen

웹 브라우저 화면이 아닌 운영체제 화면의 속성을 가지는 객체

그냥 모니터 라고 생각하시면될거같습니다

<script>
    console.log("화면 너비 : ", screen.width);
    console.log("화면 높이 : ", screen.height);
    console.log("실제 화면에서 사용 가능한 너비 : " , screen.availWidth);
    console.log("실제 화면에서 사용 가능한 높이 : " , screen.availHeight);
    console.log("사용 가능한 색상 수 : " , screen.colorDepth);
    console.log("한 픽셀 당 비트 수 : " , screen.pixelDepth);
</script>

 

location

브라우저 주소 표시줄과 관련된 객체

    <style>
        #location{
            padding: 20px;
            border: 1px dashed #666;
            line-height: 30px;
        }

    </style>
    <div id="location">
    </div>
    
<script>
    // location이 가지고있는 객체 확인
    let html = "";
    for(let key in location){
        html += key + " : " + location[key] + "<br/>";
    }

    document.querySelector('#location').innerHTML = html;
</script>

서버에서 연결하는 것이아니라 ..로컬환경이어서 잘안나오지만

나중에 서버에 연결해서 사용할떄는 정보가더 많을것이다.