본문 바로가기
프로그래밍 공부/JavaScript

JavaScript - 브라우저 객체 모델 / onload 이벤트 속성 / Audio 객체

신입사원 최종원 2019. 12. 15. 14:11

window 객체

window 객체는 많은 속성과 메서드가 존재한다. window 객체는 자바스크립트의 브라우저 기반 최상위 객체 이기도 하다. 기존에 사용하던 alert()나 prompt() 함수 모두 window 객체의 메서드 이다.  그리고 var이나 let으로 선언한 변수도 window 객체의 속성이 된다.

새로운 window 객체를 생성하려면 아래와 같은 메서드를 사용한다.

메서드 이름 설명
open(URL, name, features, replace) 새로운 window 객체를 생성한다.

window 객체의 open() 메서드는 4개의 매개변수를 사용하는데, 이것은 입력을 해도 되고 안해도 되는 매개변수이고, 이것을 '옵션(option)이라고 한다.

window.open()

위와 같은 코드를 사용시 빈 새로운 웹 브라우저 윈도우가 만들어진다. 옵션은 아래와 같이 사용한다.

window.open('https://www.naver.com', 'child', 'width=600, height=300', true)

실행하게 되면 자동으로 네이버의 팝업창이 출력이 된다. open() 메서드의 첫 번째 매개변수는 열고자 하는 HTML 페이지의 URL이고, 두 번째 매개변수는 윈도우 간 통신하는 데 사용하는 윈도우 이름이다. 세 번째 매개변수는 윈도우를 어떠한 모양으로 출력시킬지 지정하는 옵션이다. 이 부분에 사용하는 옵션은 아래와 같다.

옵션 이름 설명 입력할 수 있는 값
height 새 윈도우의 높이 px(픽셀) 값
width 새 윈도우의 너비 px(픽셀) 값
location 주소 입력창의 유/무 yes/no, 1/0
menubar 메뉴의 유/무 yes/no, 1/0
resizable 화면 크기 조절 가능 유/무 yes/no, 1/0
status 상태 표시줄의 유/무 yes/no, 1/0
toolbar 상태 표시줄의 유/무 yes/no, 1/0

open() 메서드는 새로운 window 객체를 생성하는 메서드다. 단지 팝업창을 여는 것에 끝나지 않고 윈도우 객체를 리턴한다.

let child1 = window.open('', '', 'width=300, height=200');

child1.document.write('<h1>From Parent Window</h1>');

위의 코드의 실행 결과 처럼 새로운 윈도우 객체에 접근해 속성과 메서드를 사용할 수 있다.

window 객체는 자신의 현태와 위치를 변경할 수 있도록 아래의 메서드를 제공한다.

메서드 이름 설명
moveBy(x, y) 윈도우의 위치를 상대적으로 이동한다.
moveTo(x, y) 윈도우의 위치를 절대적으로 이동한다.
resizeBy(x, y) 윈도우의 크기를 상대적으로 지정한다.
resizeTo(x, y) 윈도우의 크기를 절대적으로 지정한다.
scrollBy(x, y) 윈도우의 스크롤의 위치를 상대적으로 이동한다.
scrollTo(x, y) 윈도우의 스크롤의 위치를 절대적으로 이동한다.
focus() 윈도의 초첨을 맞춘다.
blur() 윈도우에 맞춘 초점을 제거한다.
close() 윈도우를 닫는다.

By와 To의 차이점은 상대적으로 변화시키는 것과 절대적으로 변화시키는 것에 차이다.

let child2 = window.open('', '', 'width= 300, height=200');

child2.moveTo(0, 0);

setInterval(function(){
     child2.moveBy(10, 10);
}, 1000);

새로운 window 객체를 생성하고 왼쪽 위를 0, 0으로 절대적 위치로 위치 시킨다. 그리고 setInterval()을 이용해 1000마이크로초(1초)마다 왼쪽으로 10픽셀, 아래로 10픽셀씩 이동 시킨다. 따라서 코드를 실행하면 팝업창이 1초마다 계속 이동하는 것을 볼 수 있다.

window 객체.html
0.00MB

screen 객체

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

모든 웹 브라우저가 공통으로 가지는 screen 객체의 속성은 아래와 같다.

속성 이름 설명
width 화면의 너비
height 화면의 높이
availWidth 실제 화면에서 사용 가능한 너비
availHeight 실제 화면에서 사용 가능한 높이
colorDepth 사용 가능한 색상 수
pixelDepth 한 픽셀당 비트 수

가장 많이 사용하는 screen 객체의 속성은 width와 height다.

var child = window.open('', '', 'width= 300, height=200');
var width = screen.width;
 var height = sceen.height;

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

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

location 객체

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

모든 웹 브라우저의 location 객체는 아래와 같은 속성을 가진다.

속성 이름 설명 예시
herf 문서의 URL 주소  
host 호스트 이름과 포트 번호 localhost:30763
hostname 호스트 이름 localhost
port 포트 번호 30763
pathname 디렉토리 경로 /Project/Location.html
hash 앵커 이름(#~) #beta
search 요청 매개변수 ?param=10
protocol 프로토콜 종류 http:

그리고 아래의 메서드를 가진다.

메서드 이름 설명
assign(link) 현재 위치를 이동한다.
reload() 새로고침을 한다.
replace(link) 현재 위치를 이동한다.

location 객체는 페이지를 이동할 때 사용한다. assign(link), replace(link) 메서드 모두 페이지를 이동하지만 replace(link) 메서드는 assign(link) 메서드와 다르게 뒤로 가기 버튼을 사용할 수 없다는 차이점이 존재한다.

location = 'http://www.naver.com';
location.href = 'http://www.naver.com';

location.assign('http://www.naver.com');
 location.replace('http://www.naver.com');

location = location;
location.href = location.href;

location.assign(location);
 location.replace(location);

location.reload();

location 객체.html
0.00MB

navigator 객체

navigator 객체는 웹 페이지를 실행하고 있는 브라우저에 대한 정보가 있다. 일반적으로 아래에 있는 속성을 가장 많이 사용한다.

속성 이름 설명
appCodeName 브라우저 코드 이름
appName 브라우저 이름
appVersion 브라우저 버전
platform 사용중인 운영체제의 시스템 환경
userAgent 웹 브라우저의 전체 정보

위의 속성 외에도 많은 속성이 있지만 대체로 위에 있는 속성을 많이 사용한다.

onload 이벤트 속성

window.onload = function(){

};

위와 같은 형태로 사용한다. window 객체의 onload 속성을 사용하는 것인데, 문서 객체의 속성중 'on'으로 시작하는 속성을 이벤트 속성이라고 부른다. 이 이벤트 속성은 함수를 할당해야 한다. 위의 코드는 window 객체가 로드가 완료가 되고 자동으로 할당된 함수가 실행이 되는 형태를 말한다.

여기서 'window 객체가 로드가 완료되는 시점'은 HTML 페이지에 존재하는 모든 태그가 화면에 올라가는 순간이 로드가 완료되는 시점이다.

<!DOCTYPE html>
<html>
<head>
     <title>Document Object Model</title>
     <script>alert('Process - 0')</script>
</head>
<body>
     <h1>Process - 1</h1>
     <script>alert('Process - 2')</script>
     <h2>Process - 2</h2>
     <script>alert('Process - 3')</script>
</body>
</html>

위의 코드를 실행하면 처음에는 'Process - 0'을 출력한다. 그리고 코드를 읽어 내려가서 h1 태그 내부의 문자열 'Process - 1'을 출력한다. 곧바로 아래의 script 태그를 실행해 문자열 'Process - 2'를 출력한다. alert()를 닫으면 다시 <h2> 태그 내부의 문자열 'Process - 2'를 출력하고 아래의 script 태그의 문자열 'Process - 3'를 출력한다. 

<!DOCTYPE html>
<html>
<head>
     <title>Document Object Model</title>
     <script>
          window.onload = function(){
               alert('Process - 0');
          }       
     </script>
</head>
<body>
     <h1>Process - 1</h1>
     <h2>Process - 2</h2>
</body>
</html>

onload를 사용해서 위의 코드를 실행하게 되면, 보통은 alert('Process - 0')이 실행이 된후 h1 태그와 h2 태그가 각각 출력이 되지만 onload 때문에 h1 태그와 h2 태그가 먼저 출력이 되고 다 출력이 되는 순간 alert('Process - 0')이 마지막으로 출력이 된다.

Audio 객체

HTML5 태그를 이용해서 음악을 재생할 수 도 있지만, audio 태그를 이용해서 음악을 재생할 수 있다. 단 HTML5를 지원하는 웹 브라우저에서만 사용할 수 있다. 음악을 재생할 때는 Audio 객체를 사용한다.

let audio = new Audio('음악 파일.mp3');

let audio = new Audio();
audio.src = '음악 파일.mp3';

위의 방법으로 Audio 객체를 생성할 수 있다. Audio 객체는 아래와 같은 속성이 있다.

속성 이름 설명
src 재생하려는 음악 파일 경로
volume 음악의 음량
currentTime 음악의 현재 위치(초 단위 사용)

그리고 아래와 같은 메서드가 있다.

메서드 이름 설명
play() 음악을 재생한다.
pause() 음악을 일시 정지한다.

이것을 이용해서 간단한 음악 재생 프로그램도 만들 수 있다.

<!DOCTYPE html>
<html>
<head>
     <script>
          let audioplayer = new Audio();
          audioplayer.src = '노래.mp3';
     </script>
</head>
<body>
     <button onclick='audioplayer.play()'>PLAY</button>
     <button onclick='audioplayer.pause()'>PAUSE</button>
     <input type='number' onchange='audioplayer.currentTime=this.value'>
     <input type='number' onchange='audioplayer.volume=this.value'>
</body>
</html>

Audio 객체.html
0.00MB

'프로그래밍 공부 > JavaScript' 카테고리의 다른 글

JavaScript - 문서 객체 생성  (0) 2019.12.16
JavaScript - 문서 객체 모델 개요  (0) 2019.12.15
JavaScript - 브라우저 객체 모델 개요  (0) 2019.12.13
JavaScript - 기본 내장 객체 심화  (0) 2019.12.13
JavaScript - Math 객체  (0) 2019.12.13

'프로그래밍 공부/JavaScript' Related Articles

티스토리툴바