[javascript] 브라우저 관련 객체

1. window

 

window객체는 브라우저의 최상위 객체를 의미하며 아래 설명된 객체를 포함하는 객체이기도 합니다. 수많은 속성과 메서드가 존재하는데 전체를 다 알 수도 없고 알아보기도 어려워서 몇 가지만 추려서 살펴보고자 합니다. 참고로 alert 같은 기본적인 것도 window의 메서드로 처리되며 var를 통해 생성한 변수도 window의 속성으로 처리됩니다. 

 

open	새로운 window객체를 생성합니다.
moveBy	윈도우를 지정한 위치로 이동시킵니다. (상대위치)
moveTo	윈도우를 지정한 위치로 이동시킵니다. (절대위치)
resizeBy	윈도우의 크기를 지정합니다. (상대크기)
resizeTo	윈도우의 크기를 지정합니다.(절대크기)
scrollBy	윈도우의 스크롤 위치를 이동시킵니다. (상대위치)
scrollTo	윈도우의 스크롤 위치를 이동시킵니다. (절대위치)
focus	윈도우로 포커스를 맞춥니다.
close	윈도우를 닫습니다.

 

open메서드는 총 4개의 매개변수를 전달할 수 있고 생략도 가능합니다. 매개변수 없이 open매서드를 호출하면 비어있는 창의 브라우저만 생성됩니다.

 

open메서드는 첫번째 매개변수로 window객체를 생성할 때 표시할 URL이며 두 번째는 윈도 이름, 세 번째는 window의 외관에 관한 설정, 그리고 마지막 네 번째는 두 번째 매개변수에서 이미 존재하는 창의 이름을 사용했을 때 열어본 페이지 목록에 덮어쓸 것인지 아니면 새로 추가할 것인지의 여부를 지정합니다. 또한 모든 매개변수는 옵션이므로 생략이 가능합니다

window.open('http://cliel.com/', 'cliel', 'width=500, height=500');

세 번째 매개변수에서 윈도우 외관을 설정할 때는 다음과 같은 내용으로 설정이 가능합니다.

 

width	윈도우의 넓이
height	윈도우의 높이
menubar	메뉴바 표시 여부
resizable	창의 크기를 임으로 조정가능하게 할지 여부
status	상태바 표시 여부
toolbar	도구모음바 표시 여부

 

open메서드는 실행할때 새로운 window객체를 만들고 해당 객체를 그대로 반환하므로 반환된 객체를 통해 별도의 제어가 가능합니다.

var win = window.open('http://cliel.com/', 'cliel', 'width=500, height=500');
win.moveBy(500, 500);
win.resizeTo(300, 100);

참고로 만약 접속하는 환경이 모바일이라면 다음과 같은 속성 사용도 가능합니다.

 

orientation

화면의 방향

 

만약 orientation값이 90 혹은 -90이라면 현재 화면이 가로로 표시되고 있음을 의미합니다.

if (window.orientation == 90 || window.orientation == -90) {
	//가로
}

window객체에서 가장 자주 사용되는 이벤트로는 대표적으로 onload이벤트가 있습니다.

 

onload

문서의 모든 요소가 브라우저에 로드가 완료되는 시점에 발생

 

onload이벤트를 사용하면 문서의 모든 요소가 로드되는 시점을 확인할 수 있습니다.

<script>
	window.onload = function() {
		alert('완료');
	};
</script>

 

2. screen

 

screen객체는 화면표시 영역을 다룰 수 있도록 하며 대략 아래 속성을 가지고 있습니다.

 

width	화면의 넓이
height	화면의 높이
availWidth	화면상 넓이
availHeight	화면상 높이
colorDepth	표현 가능한 색상
pixelDepth	픽셀당 비트 수

 

alert('화면크기 : ' + screen.width + 'x' + screen.height);

 

3. location

 

현재 문서의 주소정보를 가지고 있는 객체이며 관련된 정보를 아래 속성을 통하여 확인할 수 있습니다.

 

href	URL 주소
host	호스트이름및 포트번호
hostname	호스트이름
port	포트번호
pathname	URL 경로
hash	현재 앵커명
search	GET속성및 값
protocol	프로토콜

 

alert('현재 주소 : ' + location.href);

또한 아래 메서드를 사용하면 특정 URL로 이동할 수 있습니다.

 

assign	지정된 주소로 이동
replace	지정된 주소로 이동
reload	새로고침

 

location.replace('http://www.daum.net/');

replace와 assign모두 지정된 URL로 이동하며 reload를 대신하는 새로고침의 용도로도 사용하곤 합니다. 참고로 replace의 경우 페이지를 이동하면 뒤로 가기 버튼은 사용할 수 없습니다.

 

4. navigator

 

브라우저의 정보를 확인할 수 있는 객체이며 아래 속성을 통해 각각의 정보를 확인할 수 있습니다.

 

appCodeName	브라우저 코드명
appName	브라우저 명
appVersion	브라우저 버전
platform	브라우저가 동작중인 기반 운영체제
userAgent	웹 에이전트 값

 

alert(navigator.appName);
document.write(navigator.userAgent);

userAgent속성은 접속브라우저의 다양한 정보를 가지고 있는데 이를 이용해 모바일로의 접속 여부를 확인하기도 합니다. 

var mobile = ['iphone', 'android'];
for (var i in mobile) {
	if (navigator.userAgent.toLowerCase().match(new RegExp(mobile[i]))) {
		//모바일(아이폰, 안드로이드)
	}
	else
	{
		//그외
	}
}

예를 들어 안드로이드 스마트폰에서 접속하면 userAgent에 android라는 문자열이 표시되는데 이를 구분하여 모바일 여부를 판단하는 것입니다.

 

5. audio

 

브라우저에서 소리파일을 재생할 수 있도록 해주는 객체이며 다음과 같은 속성을 사용할 수 있습니다.

 

src	재생 파일 경로
volume	볼륨
currentTime	재생중인 시간(초)

 

var myAudio = new Audio();
myAudio.src = '/test.mp3';
//혹은
var myAudio2 = new Audio('/test.mp3');

 

소리파일을 재생하고 멈추는 동작을 수행하려면 다음의 메서드를 사용해야 합니다.

 

playy	파일을 재생합니다.
pause	파일을 재생을 일시정지합니다.

 

var myAudio = new Audio();
myAudio.src = '/test.mp3';

myAudio.play();

 

audio에서 파일재생을 중지하는 stop과 같은 메서드는 존재하지 않기에 stop과 동일한 동작을 수행하려면 puase메서드로 중지한 뒤에 currentTime값을 0으로 줘야 합니다.

 

참고로 태그를 통한 audio객체의 사용에 관해서는 다음 글을 참고해 주세요.

 

[Web/HTML5 & CSS3] - [HTML5&CSS3] 오디오태그

[HTML5&CSS3] 오디오태그

6. video

 

브라우저에서 동영상 파일을 재생할 수 있도록 해주는 객체이며 다음과 같은 속성을 사용할 수 있습니다.

 

height	동영상 영역의 세로크기
width	동영상 영역의 가로크기
controls	동영상 영역에서 사용자가 인터페이스 표시여부

 

var video = new Video('/test.mp4', true);
video.height = 280;
video.width = 500;
video.controls = 'controls';

또한 동영상을 재생하려면 아래 메서드를 사용합니다.

 

play	동영상 파일을 재생합니다.

 

var video = new Video('/test.mp4', true);
video.height = 280;
video.width = 500;
video.controls = 'controls';
video.play();

참고로 태그를 통한 video객체의 사용에 관해서는 다음 글을 참고해 주세요.

 

[Web/HTML5 & CSS3] - [HTML5&CSS3] 비디오 태그

[HTML5&CSS3] 비디오 태그