[JS] 윈도우객체(window object) : window.open(), setTimeout(), setInterval() 등

꿈꾸는개발자maker 2022. 8. 10. 21:45

2022. 8. 10. 21:45

728x90

Window Object(윈도우 객체)

브라우저 창에 대한 설정을 하는 객체

window객체는 자바스크립트의 최상위 객체, BOM/DOM으로 나뉨

BOM(Browser Object Model) : 브라우저에 관련된 객체. ex) location, navigator, history, screen객체

DOM(Document Object Model) : document객체. 문서 자체에 관계가 있는 모델들을 담아둠

window.open()

브라우저 새로 띄우기

window.open(주소창, 열려는 창 이름, 넓이, 높이)

window.open 반환값 새로 만들어진 창 객체가 반환됨. 창의 생성에 실패하면 null을 반환 이 객체를 통해서 새창을 제어할 수 있다. 예로 popup.close() 로 창을 닫기 가능

function test1() {
  // window.open();                            // 비어있는 새탭이 열림
  // window.open("01_JavaScript.html");        // 01번html문서 열림
  // window.open("<http://www.naver.com>");      // 네이버 열림
  window.open('<http://www.naver.com>', '네이버', 'width=500, height=300');      
// 네이버 열림 + 팝업 + 창크기 지정 // '네이버' : 창에 대한 이름 지정 // 크기지정하면 해당 크기의 팝업으로 뜸

}

popup.document.write()

팝업 창 띄우기

function test2() {          
// var popup = window.open('', '', 'width=300, height= 200'); // 비어있는 팝업창이 뜸                
popup.document.write('<html><body><h2>짜잔! 새로운 팝업 탄생잉요!</h2></body></html>');
}

window객체의 timer메소드

setTimeout()

몇 밀리초 후에 함수를 호출

function test3(){
  window.open(', ', 'width=500, height=300');

  myWindow.alert('3초 후에 이 페이지는 종료됩니다.'); // myWindow 팝업창에 안내창 뜸 
  
  // 알림창 3초 후에 제거
  // window.setTimeout()
  
  myWindow.alert('3초 후에 이 페이지는 종료됩니다.');
  // myWindow 팝업창에 안내창 뜸 
  window.setTimeout(function() {
          myWindow.close();   // // 닫아줌 언제? 3초 뒤에 (1초 = 1000)
  },3000);
}

close() : window를 닫음

setInterval()

지정한 시간마다 매개변수로 넘겨준 함수를 실행

// 목적 : 버튼을 누르지 않아도 시간이 실시간으로 바껴서 화면에 보이는 것
function test4() {
    var area4 = document.getElementById('area4');

    // window.setInterval()
    **window.setInterval**(function(){
    var date = new Date();      // 시간을 나타낼거라고 했으니. 시간을 나타내는 객체 date
    area4.innerHTML = date.getHours() + " : " + date.getMinutes() + " : " + date.getSeconds();                              
    // 밸류가 아니니 innerHTML
    }, 1000); // 시간이 바뀌는 기준 1초 // 1000 1초마다 내용 바뀌게 할 것이니 단위는 1000

new Date()

시간을 나타내는 객체 Date

var date = **new Date()**;      // 시간을 나타낼거라고 했으니. 시간을 나타내는 객체 date
area4.innerHTML = date.**getHours**() + " : " + date.**getMinutes**() + " : " + date.**getSeconds**();                              
// 밸류가 아니니 innerHTML

728x90

저작자표시

'JavaScript' 카테고리의 다른 글

[JS] DOM(Document Object Model) - Node, createElement(), createTextNode() 등 (0)	2022.08.12
[JS] BOM(Browser Object Model) : navigator, screen, location, history 객체 (0)	2022.08.11
[JS] 객체(Object) : 객체 선언, 호출 & 속성 & 객체배열 (0)	2022.07.28
[JS] 함수(Function) : 매개인자로 전달하기, 함수 리턴처리, 매개변수로 함수 전달, 함수 리턴, 내장함수 (0)	2022.07.27
[JS] 배열(Array) : 선언 & 초기화 & 메소드 종류 (0)	2022.07.26

힘내보자