[ Javascript ] window 객체의 기본 메서드

window 객체의 기본 메서드

window 객체는 자신의 형태와 위치를 변경할 수 있게 아래와 같은 메서드를 제공합니다.

 

window 객체의 메서드

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

...By() 형태의 메서드는 현재 윈도우를 기준으로 상대적으로 속성을 변화하는 메서드이며, ...To() 형태의 메서드는 절대적인 기준으로 속성을 변화하는 메서드입니다.

 

상대 이동과 절대 이동의 차이 예

var output = '';

for(var key in screen) {
    output += 'ㅁ ' + key + ': ' + screen[key] + '\n';
}
console.log(output);

/*
Chrome *******

ㅁ availWidth: 1080
ㅁ availHeight: 1895
ㅁ width: 1080
ㅁ height: 1920
ㅁ colorDepth: 24
ㅁ pixelDepth: 24
ㅁ availLeft: 0
ㅁ availTop: 25
ㅁ orientation: [object ScreenOrientation]
ㅁ addEventListener: function addEventListener() { [native code] }
ㅁ dispatchEvent: function dispatchEvent() { [native code] }
ㅁ removeEventListener: function removeEventListener() { [native code] }
*/

코드를 실행하면 결과가 웹 브라우저마다 다릅니다.

 

screen 객체의 속성

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

가장 많이 사용하는 screen 객체의 속성은 width 속성과 height 속성입니다. 이 속성을 사용하면 쉽게 window 객체를 화면에 꽉 차게 만들 수 있습니다.

 

브라우저의 크기를 화면에 일치시키는 방법 예

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);

 

 

location 객체

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

 

location 객체의 속성 예

var output = '';
for(var key in location) {
    output += 'ㅁ ' + key + ': ' + location[key] + '\n';
}
console.log(output);

/*
Chrome *****

ㅁ ancestorOrigins: [object DOMStringList]
ㅁ href: http://192.166.60.3/myweb/?page=test
ㅁ origin: http://192.166.60.3
ㅁ protocol: http:
ㅁ host: 192.166.60.3
ㅁ hostname: 192.166.60.3
ㅁ port: 
ㅁ pathname: /myweb/
ㅁ search: ?page=test
ㅁ hash: 
ㅁ assign: function assign() { [native code] }
ㅁ reload: function reload() { [native code] }
ㅁ replace: function replace() { [native code] }
ㅁ toString: function toString() { [native code] }
*/

위 코드를 실행하면 웹 브라우저마다 실행 결과가 조금씩 다릅니다. 속성만 출력하는 브라우저가 있고, 메서드까지 출력하는 브라우저가 있습니다.

 

location 객체의 속성

속성	설명	예
href	문서의 URL 주소
host	호스트 이름과 포트 번호	localhost:12345
hostname	호스트 이름	localhost
port	포트 번호	12345
pathname	디렉토리 경로	/myweb/
hash	앵커 이름(#~)	#beta
search	요청 매개변수	?page=test
protocol	프로토콜 종류	http:

 

location 객체의 메서드

속성	설명
assign(link)	현재 위치를 이동합니다.
reload()	새로고침합니다.
replace(link)	현재 위치를 이동합니다.

location 객체는 페이지를 이동할 때 많이 사용합니다. 아래 네 가지 방법으로 페이지를 이동할 수 있습니다. assign() 메서드와 replace() 메서드 모두 페이지를 이동하지만, replace() 메서드는 assign() 메서드와 다르게 뒤로 가기 버튼을 사용할 수 없다는 차이가 있습니다.

 

location 페이지 이동 예

<div id="click">click</div>
<div onClick="btnClick()">click2</div>

console.log(location); // location 정보
console.log(location.href); // http://192.166.60.3/myweb/?page=test ( 현재 주소창 )

document.getElementById('click').addEventListener('click', function() {
    location.assign(location);
});
function btnClick() {
    location.replace(location);
}

위와 같은 방법으로 현재 페이지를 새로고침할 수 있습니다.

 

 

navigator 객체

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

 

navigator 객체의 속성

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

 

navigator 객체의 속성 예

var output = '';
for(var key in navigator) {
    output += 'ㅁ ' + key + ': ' + navigator[key] + '\n';
}
console.log(output);

/*
ㅁ vendorSub: 
ㅁ productSub: 20030107
ㅁ vendor: Google Inc.
ㅁ maxTouchPoints: 0
ㅁ userActivation: [object UserActivation]
ㅁ doNotTrack: null
ㅁ geolocation: [object Geolocation]
ㅁ connection: [object NetworkInformation]
ㅁ plugins: [object PluginArray]
ㅁ mimeTypes: [object MimeTypeArray]
ㅁ pdfViewerEnabled: true
ㅁ webkitTemporaryStorage: [object DeprecatedStorageQuota]
ㅁ webkitPersistentStorage: [object DeprecatedStorageQuota]
ㅁ hardwareConcurrency: 4
ㅁ cookieEnabled: true
ㅁ appCodeName: Mozilla
ㅁ appName: Netscape
ㅁ appVersion: 5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36
ㅁ platform: MacIntel
ㅁ product: Gecko
ㅁ userAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36
ㅁ language: ko-KR
ㅁ languages: ko-KR,ko,en-US,en
ㅁ onLine: true
ㅁ webdriver: false
ㅁ getBattery: function getBattery() { [native code] }
ㅁ getGamepads: function getGamepads() { [native code] }
ㅁ javaEnabled: function javaEnabled() { [native code] }
ㅁ sendBeacon: function sendBeacon() { [native code] }
ㅁ vibrate: function vibrate() { [native code] }
ㅁ scheduling: [object Scheduling]
ㅁ ink: [object Ink]
ㅁ mediaCapabilities: [object MediaCapabilities]
ㅁ mediaSession: [object MediaSession]
ㅁ permissions: [object Permissions]
*/

브라우저마다 다른 결과가 나옵니다.

 

 

window 객체의 onload 이벤트 속성

 

onload 이벤트 속성

window.onload = function() {

};

window 객체의 onload 속성을 사용하는 것입니다. 문서 객체의 속성 중 'on'으로 시작하는 속성을 이벤트 속성이라고 부르며, 이 이벤트 속성은 함수를 할당해야 합니다. 

위 코드는 window 객체 로드가 완료되고 자동으로 할당한 함수를 실행합니다.

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