9. 윈도우 내장 객체

윈도우 객체 

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

2. window 객체는 js에서 최상위 객체로 DOM, BOM으로 분류된다. 

  - DOM(Document Object Model) : html 자체를 나타내는 객체 (document.get~) 

  - BOM(Browser Object Model) : location, history, screen, navigator -> 페이지 간 이동 

 

 * window 객체는 창 자체를 나타내고 있으므로 브라우저 창 내에서 어디서든 접근 가능 

   즉, window 객체의 속성과 기능을 호출 시 window. 을 붙이지 않아도 호출 가능하다. 

    ex) window. alert()  ==  alert()

 

 

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

지정된 지연시간 후 함수를 실행하게 만드는 window 객체 함수 

 * 시간과 관련한 함수는 비동기이다.(코드 인식은 순서대로, 수행은 동시에) 

const btn1 = document.getElementById("btn1")

btn1.addEventListener("click", function(){
    // 1. 클릭 시 변경 = 지연시간 0초 
    this.style.backgroundColor = "pink"

    // 2. 3초 후 노란색으로 변경 
    window.setTimeout(function(){
        btn1.style.backgroundColor = "yellow"
    }, 3000)

    // 2. 6초 후 빨간색으로 변경 
    window.setTimeout(function(){
        btn1.style.backgroundColor = "red"
    }, 6000)
    
    // 2. 9초 후 파란색으로 변경 
    window.setTimeout(function(){
        btn1.style.backgroundColor = "blue"
    }, 9000)
})

클릭-> (분홍색) -3초 후-> (노란색) -6초 후-> (빨간색) -9초 후-> (파란색) 

으로 변경되는 것이 아니라 클릭을 한 순간 모든 함수들이 동시에 수행된다. 

(분홍색) 클릭

(노란색)         3초 

(빨간색)                        6초

(파란색)                                       9초

 

 

 

window.setInverval(함수, 지연시간ms) 

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

 

응용: 시계 만들기 

// 1. 현재 시간을 반환하는 함수 만들기 
function currentTime() {

    // 1) 현재 시간 정보 저장할 객체 생성 
    const now = new Date()

    let hour = now.getHours()
    let min = now.getMinutes()
    let sec = now.getSeconds()

    // 2) 얻어온 값을 두자리로 맞춤 ex) 04 : 11 : 09
    if(hour < 10) hour = "0" + hour
    if(min < 10) min = "0" + min
    if(sec < 10) sec = "0" + sec

    return `${hour} : ${min} : ${sec}`
}

// 2. 페이지가 로딩되면 #clock에 현재 시간 출력 
// const clock = document.getElementById("clock")
// clock.innerText = currentTime()

// 3. 페이지 로딩 시 1초마다 시간이 변경되도록 출력 
const interval = window.setInterval(function(){
    clock.innerText = currentTime()
}, 1000)

// 4. stop 버튼 누르면 시계 멈추게 하기 
document.getElementById("stop").addEventListener("click", function(){
    window.clearInterval(interval)
})

 

---

 

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

1. url : 새 창에서 요청할 url 

 

2. 팝업창 이름 

   - 사용자 임의 지정: 새 창의 이름 지정 

   - _blank : 새 탭(기본값)

   - _self : 현재 탭

   - _parent : 부모 페이지 

   - _top: 최상위 페이지 

 

3. 특성(옵션)

  - popup: 최소한의 팝업창 사용 

  - width 혹은 innerWidth : 스크롤 막대를 포함한 콘텐츠 영역의 너비(최소 필수 값: 100)

  - height 혹은 innerHeight : 스크롤 막대를 포함한 콘텐츠 영역의 높이(최소 필수 값:100) 

  - left 혹은 screenX : 새 창이 생성될 사용자의 운영체제에서 정의한 대로 작업영역의 왼쪽에서 픽셀 단위로 거리 지정 

  - right 혹은 screenY :  새 창이 생성될 사용자의 운영체제에서 정의한 대로 작업영역의 오른쪽에서 픽셀 단위로 거리 지정

 

const pop1 = document.getElementById("pop1")
const pop2 = document.getElementById("pop2")
const pop3 = document.getElementById("pop3")

pop1.addEventListener("click", function(){
    // 1. 새 탭에서 열기(기본값)
    window.open("https://dvcoding.tistory.com/")
})

pop2.addEventListener("click", function(){
    // 2. 최소한의 형태로 열기 
    window.open("https://dvcoding.tistory.com/","_blank", "popup")
})

pop3.addEventListener("click", function(){
    // 3. 옵션 지정 
    //    작성 방법: "K=V, K=V, K=V", 크기단위X(px고정)
    const options = "width = 400, height = 500, top=50, left=400"
    window.open("https://dvcoding.tistory.com/", "popTistory", options)
})

 

 

🥸 실습: 팝업창으로 정보 보내고 정보 받아오기

// 부모창 JS : 팝업창 열기 
document.getElementById("btn1").addEventListener("click", function(){
    const options = "width = 400, height = 500, top=50, left=400"
    window.open("11-1_pop.html", "popUp", options)
})


// 팝업창 JS
// 1. 부모창을 나타내는 객체: opener
const parentValue = opener.document.getElementById("parentInput")
        
// 2. 부모로부터 받아온 값 팝업창에 출력
const fromParents = document.getElementById("fromParents")
fromParents.innerHTML = parentValue.value

// 3. 부모창으로 값 전달하고 닫기 
const childInput = document.getElementById("childInput")
const btn2 = document.getElementById("btn2")

btn2.addEventListener("click", function(){
	const fromChild = opener.document.getElementById("fromChild")
	fromChild.value  = childInput.value

	window.close()
})