JavaScript(window용 객체)

Window 객체

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

 

• BOM(Browser Object Model) : location 객체, screen 객체, navigator 객체, history 객체
• DOM(Document Object Model) : document 객체

 

window.open()

첫번째 인자값 : 새 창에서 열고자하는 url 주소

두번째 인자값 : 창이름, 창이름이 같은게 이미 열려있으면 새롭게 열리지 않고 원래 열려있던 창에서 새로고침된다.

세번째 인자값 : 창의 특성, 새로 열릴 창의 너비, 높이, 툴바, 스크롤바, 상태표시줄 등등(브라우저마다 다르다)

 

 

예) window.open("http://www.naver.com", "네이버")

 

 

창의 특성

• width : 창의 너비
• height : 창의 높이

yes / no

• resizable : 창 크기 조절 가능여부
• location : 주소창이 보일건지 안보일건지 / 수정가능할건지 아닐건지로 볼수있다.
• menubar : 메뉴바 보일건지 안보일건지
• scrollbars : 스크롤바
• status : 상태표시줄
• toolbar : 도구모음

여러 속성을 한번에 지정하고 싶으면 ,로 나열 가능

 

---

window.setTimeout(함수, ms)

<h3>window 객체의 timer 관련 메소드</h3>
    <h4>-window.setTimeout(함수,ms)</h4>

    <button onclick="test02();">확인</button>
    <script>
        function test02(){
            
            // setTimeout(function(){
            //     alert("당신의 3초를 빼앗았습니다")
            // },3000);

            var newWin = window.open(); //새로 열린창의 window객체를 반환
            newWin.alert("이 홈페이지는 3초뒤에 폭파됩니다.");
            setTimeout(function(){
                newWin.close();
            },3000)
        }
    </script>

---

 

window.setInterval(함수, ms)

<h4>window.setInterval(함수,ms)</h4>

    <button onclick="test03();">확인</button>
    <div id="area1" class="area"></div>
    <script>
        function test03(){
            var area1=document.getElementById("area1");

            var count=1;

            setInterval(function(){
                // area1.innerHTML+="안녕";
                // area1.innerHTML+=count++;

                var now = new Date();
                var hour = now.getHours();
                var min = now.getMinutes();
                var sec = now.getSeconds();

                //시간
                if(hour>12){
                    hour = hour-12; //13시 -> 1시
                }
                if(hour<10){
                    hour="0"+hour; //1시 -> 01시
                }
                //분
                if(min<10){
                    min="0"+min; //1분 -> 01분으로
                }
                //초
                if(sec<10){
                    sec="0"+sec; //1초 -> 01초
                }

                area1.innerHTML = hour+" : "+min+" "+sec+" "+"<br>";
            },1000);
            //setInterval : 내가 지정한 시간 간격마다 매번 함수 실행
        }
    </script>

---

BOM 객체

• location 객체

<h3>location 객체</h3>
    <p>
        브라우저의 주소창과 관련된 객체
    </p>

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

    <br><br>
    <!--a태그는 기본적으로 href속성을 제공해서 url요청 작성공간을 제공-->
    <a href="https://www.naver.com">네이버로 이동</a> 
    <br>
    <button onclick="location.href='https://www.naver.com';">네이버로 이동</button>
    <br>
    <label onclick="location.href='https://www.naver.com';">네이버로 이동</label>
    <br><br>
    <button onclick="location.assign('https://www.google.com');">구글로 이동</button>
    <br><br>
    <button onclick="location.replace('https://www.google.com');">구글로 이동</button>
    <!--replace는 뒤로가기가 안됨-->
    <br><br>
    <button onclick="location.href=location.href">새로고침</button>
    <button onclick="location.reload();">새로고침</button>

---

 

BOM 객체

• screen 객체

<h3>screen 객체</h3>
    <button onclick="console.log(screen);">스크린객체확인</button>
    <!--해상도 정보 해상도에 따라 값이 다르게 나올 수 있다-->

---

 

BOM 객체

• navigator 객체

<h3>navigator 객체</h3>
    <button onclick="console.log(navigator)">네비게이터확인</button>
    <!--브라우저에 대한 정보-->

---

 

BOM 객체

• history 객체

<h3>history 객체</h3>
    <button onclick="console.log(history)">히스토리확인</button>
    <!--윈도우 열람 이력-->

 

---

 

DOM

 

HTML에 있는 각각의 태그들을 노드(Node)라고 한다.

• 요소노드(Element Node) : 태그 그 자체만을 의미
• 텍스트노드(Text Node) : 태그 내에 기록되는 내용

텍스트노드가 존재하는 요소(시작태그와 종료태그가 한쌍으로 이루어져있는 요소) : div, a, h1, p, pre, . . .

텍스트노드가 존재하지 않는 요소(시작태그로만 이루어져있는 요소) : img, input, . . . 

 

---

텍스트 노드가 존재하는 노드 생성(시작태그 - 종료태그)

<button onclick="test04();">확인</button>
    <div id="area2" class="area small"></div>
    <script>
        function test04(){

            //동적으로 요소 만드는 방법1. "문자열"로 만드는 방법
            document.getElementById("area2").innerHTML = "<h3>안녕하세요</h3>";

            //동적으로 요소 만드는 방법2. document에서 제공하는 메소드를 통해 "요소객체"로 만드는 방법
            //1)element Node 생성 : document.createElement("태그명");
            var elementNode = document.createElement("h3"); //<h3></h3>
            //2)text Node 생성 : document.createTextNode("문구");
            var textNode = document.createTextNode("반갑습니다"); //안녕하세요
            //3)두개의 노드를 연결 (요소노드에 하위에 텍스트 노드를 넣겠다)
            //요소노드.appendChild(텍스트노드)
            elementNode.appendChild(textNode); //<h3>안녕하세요</h3>

            console.log(elementNode);
            console.log(typeof(elementNode));

            // document.getElementById("area2").innerHTML+=elementNode; innerHTML은 반드시 문자열 형태로 넣어야한다.
            //div태그 요소에 넣고싶다면 하위 요소로 넣어주면 됨 appendChild
            document.getElementById("area2").appendChild(elementNode);
        }
    </script>

 

텍스트 노드가 존재하지 않는 노드 생성(시작태그만 존재하는)

<button onclick="test05();">확인</button>
    <div id="area3" class="area big"></div>
    <script>
        function test05(){

            var img = document.createElement("img") //<img>
            //<img src="~" width=" " height=" ">
            console.log(img);
            console.dir(img);

            img.src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxOTEyMjdfMTY5%2FMDAxNTc3NDQyOTgzMTQ1.N5Bb0J2U24meOWW0QZgKgOd4kgd9jxPco9rBOkOSTxog.mqA5vBTt85li_8hXe4cgDN4bx5fhnUSgzvzVPXQoKiYg.JPEG.hydroin303%2F%25C8%25A3%25BB%25A7%25B8%25C7.jpg&type=sc960_832";
            img.width="200";
            img.height="100";

            console.log(img);

            document.getElementById("area3").appendChild(img);
        }
    </script>

 

 

노드삭제

<h4>노드 삭제</h4>
    <button onclick="test06();">삭제</button>
    <script>
        function test06(){
            //지우고자 하는 요소객체.remove();
            document.getElementById("area3").firstChild.remove(); //div요소객체의 첫번째 자손을 지운다.
        }
    </script>