07.21(Window 객체, BOM, DOM )

window 객체

자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 됨

window 객체의 메소드는 전역 함수이며, window 객체의 프로퍼티는 전역 변수

문서 객체 모델(DOM)의 요소들도 모두 window 객체의 프로퍼티가 됨

 

 

open

새로운 팝업 또는 탭을 열 수 있는 메소드

<input type="button" value="실행1" onclick="test1();">
<input type="button" value="실행2" onclick="test2();">
<input type="button" value="실행3" onclick="test3();">
<script>
function test1(){
  //부모(현재탭), 자식(새로열린탭/팝업) 관계로 정의됨
  //url, name, spec
  //자식팝업의 window객체가 리턴됨.
  childWindow = open("test.html", "myPopup", "width=500, height=300, top=300, left=200")
  console.log(childWindow);
}
let childWindow;
function test2(){
  childWindow = open("test.html", "myPopup");
  console.log(childWindow);
}
function test3(){
  if(childWindow){
    childWindow.close();
  }
}
</script>

 

 

setTimeout

일정시간 이후에 지정한 콜백함수를 호출

(() => {
   setTimeout(function(){
     alert("5초가 지났습니다.");
   }, 5000); 
})();

 

 

setInterval | clearInterval

일정시간 간격으로 콜백함수를 호출

생성된 인터벌함수를 제거

<input type="button" value="타이머 실행" onclick="test4();">
<div style="margin:10px 0; text-align:center;">
  <span id="timer" style="font-size:3em;"></span>
</div>
<script>
function test4(){
  let count = 10;
  timer.innerHTML = count;
  let intervalId = setInterval(function(){
    --count;

    if(count<0){
      clearInterval(intervalId);
      alert("타이머 종료!");
      return;
    }
    
    timer.innerHTML = count;
  }, 1000);
}
</script>

 

BOM

Browser Object Model

 

navigator

<input type="button" value="실행" onclick="test5();">
<div id="area5"></div>
<script>
function test5(){
  for(let k in navigator){
    area5.innerHTML += k + " : " + navigator[k] + "<br>"; 
  }
}
</script>

 

 

location

<input type="button" value="실행" onclick="test6();">
<input type="button" value="페이지 이동"
        onclick="location.href='https://naver.com'">
<input type="button" value="새로고침"
        onclick="location.reload();">
<div id="area6"></div>
<script>
function test6(){
  for(let k in location){
    area6.innerHTML += k + " : " + location[k] + "<br>";
  }
}
</script>

 

 

history

<input type="button" value="실행" onclick="test7();">
<input type="button" value="뒤로 가기" onclick="history.back();"> 
<input type="button" value="앞으로 가기" onclick="history.forward();"> 
<input type="button" value="go" onclick="history.go(-2);"> 

<div id="area7"></div>
<script>
function test7(){
  for(let k in history){
    area7.innerHTML += k + " : " + history[k] + "<br>";
  }
}
</script>

 

 

screen

웹브라우져의 viewport가 아닌 운영체제 모니터에 대한 객체

<input type="button" value="실행" onclick="test8();">
<div id="area8"></div>
<script>
function test8(){
  for(let k in screen){
    area8.innerHTML += k + " : " + screen[k] + "<br>";
  }
}
</script>

 

DOM

Document Object Model

모든 DOM의 객체는 Node객체를 상속받는다.

firstChild, lastChild, childNodes, nextSibling, previousSibling

contains(), appendChild(), removeChild()

<input type="button" value="실행" onclick="test9();">
<div id="area9"></div>
<script>
function test9(){
  console.log(document);
  let imgNode = document.createElement("img");
  imgNode.src = "https://d.pr/2Wnfza+";
  imgNode.height = "150";
  area9.appendChild(imgNode);

  area9.innerHTML += "<img src='https://d.pr/2Wnfza+' height='150'/>";
}
</script>