브라우저 객체 모델

Window 객체

• 브라우저 객체 모델(BOM, Brower Object Model)은 웹 브라우저와 관련된 객체의 집합을 의미
  • Window 객체 = { location 객체, navigator 객체, history 객체, screen 객체, document 객체 }
  • 지금까지 사용해 온 alert( )이나 prompt( )함수 모두 window 객체의 메서드

<script>
var output =‘’;
for (var key in window) {
output +=‘* ’+key+’:’+window[key] +’\\n’;
} 
alert( output );
</script>

 

새로운 window 객체 생성

open( ) 메서드로 window 생성

• open( URL, name, features, replace )
  • 4 개의 매개 변수가 있으며 4개의 매개 변수를 지정해도 되고 하지 않아도 됨 – 옵션

<script>
	window.open( ); 
</script>

<script>
	window.open(‘http://naver.com’, ‘child’, ‘width=1024, height=768’, true); 
</script>

• 첫 번째 매개변수 : 열고자 하는 웹 페이지의 URL
• 두 번째 매개변수 : 사용하는 윈도우 이름
• 세 번째 매개변수 : 원도우 크기 » 참고 - 브라우저의 팝업 창을 허용해야 됨

새로운 window를 생성하고 해당 window 객체를 리턴

• 새로운 window 객체의 속성과 메서드 활용 가능

<script>
	var child = window.open(‘’, ‘’, ‘width=1024, height=768’); 
	child.document.write(‘<h1>From Parent Window</h1>’); 
</script>

screen 객체

• screen 객체는 웹 브라우저의 화면이 아니라 운영체제 화면의 속성을 갖는 객체
• screen 객체의 속성 확인

<script>
	var output =‘’;
	for (var key in screen) {
		output += ‘* ‘ + key + ‘:’ + screen[key] + ‘\\n’;
	}
alert( output );
</script>

• width와 height 속성을 많이 사용

window를 생성하고 화면 가득 채우기

<script>
	var child = window.open(‘’, ‘’, ‘width = 300, height = 200’);
	var width = screen.width;
	var height = screen.height;

	child.moveTo(0,0);
	child.resizeTo(width, height);

	setInterval( function( ) {
		child.resizeBy(-20, -20);
		child.moveBy(10, 10);
	}, 1000);
</script>

setInterval로 1000밀리세컨 마다 resize, moveby

 

 

location 객체

• location 객체는 웹 브라우저의 주소 표시줄과 관련된 객체
  • 프로토콜의 종류, 호스트의 이름, 문서 위치 등의 정보가 있음

location 객체의 속성 확인

<script>
	var output =‘’;
	for (var key in location) {
		output += ‘* ‘ + key + ‘:’ + location[key] +’
		\\n’;
	}
	alert( output );
</script>

location 객체를 이용한 페이지 이동

location = ‘<http://naver.com>’;
location.href = ‘<http://naver.com>’;
location.assign( ‘<http://naver.com>’ );
location.replace( ‘<http://naver.com>’ );

현재 페이지 새로 고침

location = location;
location.href = location.href;
location.assign( location );
location.replace( location );

location.reload( );

 

 

location 객체의 속성 확인 및 페이지 이동

<script>
	var output =‘’;
	for (var key in location) {
		output += ‘* ‘ + key + ‘:’ + location[key] +’\n’;
	}
	alert( output );
	location = ‘http://naver.com’;
	var child = window.open(‘’, ‘’, ‘width=1024, height=768’); 
	child.locaton = ‘http://naver.com’;
</script>

 

 

navigator 객체

• navigator 객체는 웹 페이지를 실행하고 있는 브라우저에 대한 정보가 있음

navigator 객체의 속성 확인

<script>
	var output =‘’;
	for (var key in navigator) {
		output += ‘* ‘ + key + ‘:’ + navigator[key] +’\\n’;
	}
	alert( output );
</script>

자주 사용되는 navigator 객체의 속성

<script>
	alert( navigator.appCodeName); //Mozilla
	alert( navigator.appName ); //Netscape
	alert( navigator.appVersion ); //5.0 (Window NT ..
	alert( platform ); //Win32
	alert( userAgent); //Mozilla/5.0 … 
</script>

 

 

window 객체의 onload 이벤트 속성

window 객체의 onload 속성

• 객체의 속성 중 ‘on’으로 시작하는 속성을 이벤트 속성이라고 함
  • 이벤트 속성에는 함수를 할당

window 객체가 로드되었을 때 자동으로 할당되어 실행되는 함수 만들기

<script>
window.onload = function( ) {
};
</script>

• Window 객체 로드 완료 시점
  • HTML 페이지에 존재하는 모든 태그가 화면에 올라가는 순간 window 객체가 로드 완료되었다고 함