09. JS window 내장객체

🔅 window 객체

: 브라우저 창 자체를 나타내는 객체

• window 객체는 JS에서 최상위 객체 DOM,BOM으로 분류된다
  - DOM(Document Object Model) : HTML 문서 자체를 나타내는 객체(document)
  - BOM(Browser Object Model) : location, history, screen, navigator
  ** window 객체는 창 자체를 나타내고 있으므로 브라우저 창 내에서 어디서든 접근 가능 그래서 window 객체의 속성과 기능 호출 시 (window.) 단어를 생략할 수 있다. ex) window.alert() == alert()

☑️ window.setTimeout(함수, 지연시간(ms))

지정된 지연시간 후 실행하게 만드는 window 객체의 함수
** 시간 관련된 함수는 비동기 (코드 인식은 순서대로 진행되지만, 수행은 동시에 진행된다)

btn1.addEventListener("click", function(){
    // 0초 (클릭하자마자 지연시간 x)
    this.style.backgroundColor = 'pink';

    // 3초 후 orange로 변경
    window.setTimeout(function() {
        //window.setTimeout()에서 this == window 객체
        btn1.style.backgroundColor = 'orange';

    }, 3000);

    // 6초 후 yellow로 변경
    window.setTimeout(function(){
        btn1.style.backgroundColor = 'yellow';
    },6000);

☑️ window.setInterval(함수, 지연시간(ms))

지정된 지연 시간마다 함수를 수행 (첫 실행도 지연시간 후에 진행)

const interval = window.setInterval(function(){
    clock.innerText = currentTime();
}, 1000);

☑️ window.clearInterval(setInterval()이 저장된 변수)

document.getElementById("stop").addEventListener("click", function(){
    window.clearInterval(interval);
})

☑️ window.open("URL", "팝업창이름", "팝업창 특성(옵션))

• URL : 새 창에서 요청할 URL
• 팝업창 이름
  - 사용자 임의 지정 : 새 창 이름 지정
  - _blank : 새 탭 또는 새 창(기본값)
  - _self : 현재 탭 또는 현재 창
  - _top : 최상위 페이지
  - _parent : 부모페이지
• 팝업창 특성(옵션)
  - popup
  - width 또는 innerWidth : 스크롤 막대 포함 콘텐츠 영역의 너비 (최소 필수 값 : 100)
  "K=V, K=V, K=V" 형태, 크기 단위 작성 X (px 고정)
  - height 또는 innerHeight : 스크롤 막대 포함 콘텐츠 영역의 높이 (최소 필수 값 : 100)
  - left 또는 screenX : 작업 영역의 왼쪽에서 픽셀 단위로 거리를 지정
  - right 또는 screenY : 작업 영역의 오른쪽에서 픽셀 단위로 거리를 지정
  

openPopup3.addEventListener("click", function(){
    // 옵션이 지정된 팝업창
    // 옵션 작성 방법 : "K=V, K=V, K=V", 크기 단위 작성 X (px 고정)
    const options = "width=400, height=500, top=50, left=400"; 
    
    window.open("09_배열.html", "popupWindow", options);
})