[JavaScript] #06_ window객체

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

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

window객체

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

window.open()                   
 :비어있는 창이 하나 새 탭으로 열림

window.open(웹페이지 주소)   
 :해당 주소의 페이지가 새 창으로 열림

window.open(웹페이지 주소, 이름, 'width=n, height=n')
 :지정한 이름으로 지정한 사이즈의 새 창으로 해당 웹페이지가 열림.

팝업창 안에 내용 적기

window객체의 timer메소드

window.setTimeout(함수, 시간)
: 일정 시간 후에 특정 코드, 함수를 의도적으로 지연한 뒤 실행 (1초가 1000)

	<button onclick='test3();'>실행확인</button>
	<script>
		function test3(){
			var myWindow = window.open('', '', 'width=500, height=300');
			
			myWindow.alert('3초 후에 이 페이지는 종료됩니다.');
			
			window.setTimeout(function(){
				myWindow.close();
			}, 3000);	//1초가 1000.  3초 뒤에 이 함수를 실행시켜라.
		}
	</script>

window.setInterval(함수, 시간)
: 일정한 시간 간격으로 코드를 반복 실행 (1초가 1000)

	<button onclick='test5();'>실행확인</button>
	<div id='area5' class='area'></div>
	<script>
		function test5(){
			// 3초 카운트 세기 : 3 2 1 종료!
			var area5 = document.getElementById('area5');
			
			var count = 3;
			var interval3 = window.setInterval(function(){
				area5.innerHTML = 'countdown : ' + (count--);
				
				if(count < 0) {
					area5.innerHTML = '종료!';	//하지만 실제로 종료된 것은 아니다.
				}
			}, 1000);
		}
	</script>

clearInterval( )
: 함수 반복 중단

	<button onclick='test5();'>실행확인</button>
	<div id='area5' class='area'></div>
	<script>
		function test5(){
			// 3초 카운트 세기 : 3 2 1 종료!
			var area5 = document.getElementById('area5');
			
			var count = 3;
			var interval3 = window.setInterval(function(){
				area5.innerHTML = 'countdown : ' + (count--);
				
				if(count < 0) {
					clearInterval(interval3);	// 2) clearInterval을 추가해주어야 실제로 종료된 것.
					area5.innerHTML += '종료!';	// 1) 이것만 입력하면 종료!가 뜨긴 하지만 countdown이 -로 되면서 실제로 종료된 것이 아님을 알 수 있음.
				}
			}, 1000);
		}
	</script>