자바스크립트 window 객체

 

window 객체는 자바스크립트의 

최상위 객체 크게 BOM과 DOM으로 나누어 짐 

 

BOM (Browser Object Model) : location(주소창 관련),

screen(창 관련),  navigator(브라우저 관련), history(페이지 기록 관련)

 

DOM (Document Object Model) : document

 

open[window 생략 가능]

 

open("http://www.주소.com"[매개변수1], "매개변수2"); 

 

매개변수 1 : 새 창에서 열고자하는 url 주소 

매개변수 2 : 창 이름(target). 해당 창 이름으로 같은 창이 열려있으면 새로 열리지

않고 열려 있는 창을 표시한다. 

 

매개변수 3: 새 창의 너비, 높이, 주소창여부, 툴바여부 등 설정(특징)

width 너비, height 창 높이 -> 기본적 px 단위 

 open("http://www.naver.com", "ㅋㅋ", "width=500,height=500");

 

 

  창 크기 조절여부 : resizable(창 크기 조절 여부)-> yes/no 거의 안된다,

                location(주소창 여부) :

                toobar : 툴바 여부

                scrollbars(스코롤바 여부)

                status : (상태표시줄)

 

>window.setTimeout(함수, 시간ms)

 

setTimeout(함수, 시간ms)

 

설정한 시간 후에 함수의 내용을 실행(한 번)

 

    // 팝업창을 하나 띄우고 해당 팝업에서 알림창을 띄운다

        const myWindow = open("http://www.naver.com");

        myWindow.alert("메롱");

        setTimeout(function(){

            myWindow.close();

            }, 3*1000);

        }

       

 

[window.]setInterval(함수, 시간ms)

설정한 시간마다 함수의 내용을 실행한다. 

 

 

   <button onclick="test3();">시간보기</button>

    <div id="area1" style="border: 2px solid cornflowerblue; height: 30px;" ></div>

    <script>

        function test3(){

            const area1 = document.getElementById("area1");

            setInterval(function(){

                const now = new Date();

                let hour = now.getHours();

                let min = now.getMinutes();

                let sec = now.getSeconds();

                area1.innerHTML = `${hour}:${min}:${sec}`;

            }, 1*1000);

        }

    </script>

 

---

[window.]onload

 

화면에 윈도우 객체의 로드가 완료되면 설정되어 있는 

함수를 실행 

* 윈도우 객체의 로드 완료 => 모든 태그(요소)가 화면에 표시된 상태(시점)

  // let area2 = document.getElementById("area2");

        onload = function(){

            // 함수 실행 시점 -> 윈도우 객체 로드 완료된 상태

            // 로드가 완료되고 3초 후 div#area2 영역에 "오늘은 화요일입니다."를 표시

                setTimeout(function(){

                document.getElementById("area2").innerHTML = "오늘은 화요일 입니다";

                document.getElementById("area2").style.border = "2px solid red";

            }, 3*1000);

        }

 

 

---

 

BOM (Browser Object Model)

 

 

   <h3>location 객체</h3>

    <p>

        브라우저의 주소창과 관련된 객체

    </p>

    <button onclick="console.log(location);">location 확인</button>

    <a href="http://www.google.com">구글로 가자!</a>

    <button onclick="location.href = 'http://www.google.com';"></button>

   

    <div onclick="location.href = 'http://www.google.com';" style="cursor: pointer;">구글로가요</div>

    <br><br>

    <!-- replace 사용 시 직전페이지로 이동 불가(뒤로 가기 버튼이 동작 x)-->>

    <button onclick="location.replace('http://www.google.com');">구글로</button>

    <br><br>

    <button onclick="location.reload();">새로고침</button>

    <button onclick="location.href = location.href;">새로고침2</button>

    <hr>

 

 

---

    <h2>DOM(document Object Model)</h2>

    <p>

        HTML에 있는 각각의 요소들을 노드(Node)라고 표현함

        * 요소 노드(Element Node) : 태그 그 자체를 의미

        * 텍스트 노드(Text Node) : 태그 내의 내용 부분을 의미

    </p>

 

   <div>

        <input type="text">

        <h1>안녕</h1>

        <ul>

            <li>목록1</li>

            <li>목록2</li>

        </ul>

    </div>

    <h3>* 노드(요소) 생성 관련 메소드</h3>

    <h4>텍스트 노드가 존재하는 노드 생성(시작태그, 종료태그)</h4>

    <button onclick="test4();">노드 생성</button>

    <div id="area4"></div>

    <script>

        function test4(){

            // <h4> 안녕? 반가워! </h4> => 노드 추가

            const area4 = document.getElementById("area4");

            area4.style.border = "1px solid red";

            // area4.innerHTML = "<h4>안녕?반가워!</h4>";

            // 1) 문자열로 만드는 방법 -> innerHTML 속성 사용

            // 2) document 객체의 메소드 활용

            /*

               * 요소 노드 생성 : document.createElement("태그명"); -> 요소 노드 생성

               * 텍스트 노드 생성 : document.createTextNode("내용");

               * 요소 노드에 텍스트 노드 결합 : element.appendChild(textnode); => <태그>내용</태그>

            */

           const element = document.createElement("h4");

           const textNode = document.createTextNode("안녕? 반가워!");

           element.appendChild(textNode);

           area4.appendChild(element); // div#area4 요소에 생성된 요소 노드 추가

        }

    </script>

    <br>

    <h3>텍스트 노드가 존재하지 않는 요소 노드 생성(시작태그만 존재하는 태그)</h3>

    <button onclick="test5();">노드 생성</button>

    <div id="area5"></div>

    <script>

        function test5(){

            // <img src="" alt="" width="">

            const imgEle = document.createElement("img");

            imgEle.src = "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbkzBWJ%2Fbtr5aGCY6HI%2F6K5yW67AOrkePmK7QeKrhK%2Fimg.png";

           

            imgEle.width = '30';

            imgEle.height = '30';

            document.getElementById("area5").appendChild(imgEle)

        }

    </script>

    <br>

    <h3>* 노드 삭제 관련 메소드</h3>

    <button onclick="test6()">노드 삭제</button>

    <script>

        function test6(){

        const area5 = document.getElementById("area5");

        // 삭제 하고자 하는 요소노드 (객체).remove();

        // area5.firstChild.remove();

        // 선택자를 사용하여 요소 직접 접근 => 아이디 속성이 'area5인 요소 내 img 요소'

        document.querySelector("#area5 img").remove();

    }