상세 컨텐츠

본문 제목

[javascript] 브라우저 관련 객체

Web/Javascript

by 클리엘 클리엘 2020. 5. 26. 01:32

본문

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] 오디오태그

웹상에서 오디오를 재생하기 위해서는 audio 태그를 사용합니다. HTML5 전용 태그이므로 익스플로러 8 이하에서는 사용할 수 없습니다.

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] 비디오 태그

비디오 태그는 웹상에서 동영상을 재생할 수 있도록 하는 태그입니다.

..

lab.cliel.com

 

'Web > Javascript' 카테고리의 다른 글

[javascript] 이벤트 처리  (0) 2020.05.29
[javascript] 문서 객체 다루기  (0) 2020.05.27
[javascript] 브라우저 관련 객체  (0) 2020.05.26
[javascript] 기본 내장 객체 (표준 내장 객체)  (0) 2020.05.26
[javascript] 생성자 함수  (0) 2020.05.21
[javascript] 객체  (0) 2020.04.30

관련글 더보기

댓글 영역