브라우저 & 윈도우 객체 사용하기 - 자바스크립트(Javascript)

브라우저 객체, 윈도우 객체 사용하기

자바스크립트에서 사용 가능한 내장 객체 중 브라우저에 내장된 객체에 대해 살펴봅니다. 브라우저 객체 모델(Browser Object Model : BOM)은 웹 브라우저와 관련된 객체의 집합(window, location, screen, history, navigator, document)을 의미합니다. 오늘은 브라우저 객체에 대해 살펴봅니다.

---

window 객체는 브라우저의 창을 의미하며, 다양한 메서드로 이 창을 제어할 수 있습니다. window 객체의 메서드 종류에 대해 살펴봅니다.

 

메서드 종류	설명
alert( )	경고 상자 표시
atob( )	암호화된 문자열을 복호화(base - 64)
btoa( )	문자열을 암호화(base - 64)
clearInterval( )	setInterval( )로 설정된 타이머 지우기
clearTimeout( )	setTimeout( )로 설정된 타이머 지우기
close( )	현재 창 닫기
confirm( )	확인 및 취소 버튼이 있는 대화상자 표시
focus( )	현재 창의 포커스 설정
moveBy( )	현재 위치를 기준으로 창을 이동
moveTo( )	창을 지정된 위치로 이동
open( )	새 브라우저 창 열기
print( )	현재 창의 내용을 인쇄
prompt( )	사용자의 입력을 요구하는 상자 표시
resizeBy( )	지정 픽셀로 창 크기 조절
resizeTo( )	지정 폭 & 높이로 창 크기 변경
scrollBy( )	지정된 픽셀수만큼 문서 스크롤
setInterval( )	지정된 시간(밀리 초)으로 함수 호출 또는 표현식을 평가
setTimerout( )	지정된 시간(밀리 초) 후에 함수 호출 또는 표현식을 평가
stop( )	창 로드 정지

이외에도 여러 메서드가 있습니다.

 

<script>

window.open("http://www.naver.com/", "baik's windows","width=400");

window.alert("경고 창 띄우기");

window.prompt("Question","Answer");

window.confirm("확인 요청");

</script>

 

상기와 같이 코드를 작성하여 실행시켜 결과를 확인해 봅니다. (새로운 창을 띄우는 등등 브라우저에서 바로 확인 가능합니다.) window 객체의 속성에 대해 살펴봅니다.

 

window 객체 속성	설명
closed	창이 닫혀 있는지를 true, false로 반환
defaultStatus	창의 상태 표시줄에 있는 기본 텍스트를 설정 또는 반환
frameElement	현재 창이 삽입된 <iframe> 요소 반환
frames	현재 창에서 모든 <iframe> 요소 반환
length	현재 창에서 <iframe> 요소의 개수 반환
name	창 이름을 설정 또는 반환
opener	창에 대한 참조 반환
outerHeight	toolbar/scrollbar 포함된 창 높이 반환
outerWidth	toolbar/scrollbar 포함된 창 너비 반환
self	현재 창을 반환
top	최상위 브라우저 창을 반환

 

setInterval메서드를 이용하여 2초(2000밀리초)마다 console 창에 띄우게 합니다. 그리고 clearInterval메서드로 setInterval를 정지시키도록 버튼을 만들어 봅니다.

setInterval 메서드 사용 예

console 창에 2초에 한 번씩 hello! javascript를 출력하며 버튼을 클릭하면 해당 메서드에서 설정된 타이머가 정지되는 것을 확인합니다.

setInterval 메서드 사용 예

screen 객체와 사용할 수 있는 속성에 대해 살펴봅니다. screen 객체는 사용자의 모니터 정보를 제공하는 객체입니다.

 

var scr_width=screen.width;

var scr_height=screen.height;

console.log(scr_width, scr_height);

 

스크린 객체 사용하여 사용자 모니터 정보를 확인

screen 객체를 사용하여 모니터 정보를 확인할 수 있습니다. screen 객체에서 사용 가능한 속성에 대해 살펴봅니다.

 

속성	설명
width	화면의 너비 값 반환
height	화면의 높이 값 반환
availWidth	작업표시줄을 제외한 화면의 너비 값 반환
availHeight	작업표시줄을 제외한 화면의 높이 값 반환
colorDepth	사용자 모니터가 표현 가능한 컬러 bit를 반환

---

이외에도 자바스크립트는 브라우저와 관련된 메서드와 속성을 제공하는 location 객체, 사용자 방문 기록정보 다룰 수 있는 history 객체, 브라우저 정보와 운영체제 정보를 제공하는 navigator 객체 등을 사용할 수 있습니다. 자바스크립트에서 사용 가능한 여러 객체들 중 window 객체 타이머 관련 메서드를 제외한 나머지는 그리 어렵지 않습니다. 타이머 관련 메서드에 대해서는 다시 한번 살펴볼 예정입니다.