[JavaScript] 자바스크립트 BOM① window 객체

BOM: Browser Object Model

자바스크립트의 BOM은 window 객체에 location 객체, screen 객체, history 객체, navigator 객체, document 객체가 속해있는 형식으로 구성되어있다.

이 포스트에서는 window객체에 대해 작성한다.

 

1. 윈도우 객체 생성 메서드

open(): 새로운 윈도우를 만드는 메서드

window.open('문서 주소', '윈도우 이름', '옵션=값, 옵션=값');

 

open() 메서드의 옵션

• width = 픽셀값: 윈도우의 가로 너비 설정
• height = 픽셀값: 윈도우의 세로 너비 설정
• left = 픽셀값: 윈도우의 left 위치 설정
• top = 픽셀값: 윈도우의 top 위치 설정
• location = yes/no: 윈도우의 주소창에 대한  show/hide 설정
• scrollbars = yes/no: 윈도우의 스크롤바에 대한 show/hide 설정
• menubar = yes/no: 윈도우의 메뉴바에 대한 show/hide 설정
• toolbar = yes/no: 윈도우의 툴바에 대한 show/hide 설정
• status = yes/no: 윈도우의 상태줄에 대한 show/hide 설정

window.onload = function(){
	window.open('http://naver.com','naver','width=300, height=300, left=100, top=10');
};

 

 

2. 타이머 함수

1)setInterval(): 일정 시간마다 지정한 함수를 반복적으로 실행

setInterval(function(){실행문},1000); //밀리초 단위

 

2)claerInterval(): setInterval() 함수 중지시킴

 

3)setTimeout(): 설정한 시간이 흐른 뒤에 지정한 함수를 한 번 실행

setTimeout(function(){실행문},1000); //밀리초 단위

 

4)clearTimeout(): setTimeout() 함수를 중지시킴

 

let i = 0;
setInterval(function(){
	i++;
    alert('2초마다 실행'+i);
    },2000);

 

window.onload = function(){
	let bt = document.getElementById('bt');
    let i = 0;
    let increase = setInterval(function(){
    	i++;
        alert(i);
    },2000);	//2초마다 반복
    bt.onclick = function(){
		clearInterval(increase);  //버튼을 클릭하면 setInterval() 종료
	};
}