BOM = Browser Object Model = 브라우져의 기능/요소를 객체화 하여 제어할 수 있도록 하는것.

✔️ 표준이 정의되지 않아서 대부분의 브라우져에서 지원되지만 차이가 있을 수 있다.

대부분은 window 창을 띄우거나 닫을 때 많이 사용한다.

대표적인 객체로는 window 객체가 있고 window 객체의 하위 객체로 screen, location, history, navigator, popup boxes, document가 있다.

이 포스트에는 window 객체에 대해 먼저 알아보자.

window

windows 창 객체. 모든 전역 JavaScript 객체, 함수 및 변수는 자동으로 window 객체의 하위 객체가 된다.

HTML DOM도 window 객체의 하위 객체다.

가장 하단에서 예시를 볼 수 있다.

window.innerWidth

브라우저 창의 내부 너비를 픽셀 단위로 반환한다.

window.innerWidth;

이런식으로 입력한다.

window.innerHeight

브라우저 창의 내부 높이를 픽셀 단위로 반환한다.

window.innerHeight;

이런식으로 입력한다.

window.open()

브라우져에서 새 창을 연다.

window.open(주소,타겟,창 정보);

이런식으로 입력한다.

window.close()

브라우져에서 현재 창을 닫는다.

window.close();

이런식으로 입력한다.

window.moveTo()

현재 창을 이동시킨다.
비슷한 메서드로 window.moveBy()가 있다.

window.moveTo(x축, y축);
window.moveBy(x축, y축);

이런식으로 입력한다.

window.resizeTo()

현재 창 크기를 조정한다.

window.resizeTo(가로, 세로)

이런식으로 입력한다.

예제

<button onclick="newWindow();">새로운 창 열기</button>
<button onclick="browserInfo();">브라우져 크기</button>
<p>
<button onclick="mvUp();">위로 이동</button>
<button onclick="mvDown();">아래로 이동</button>
<button onclick="mvLeft();">왼쪽으로 이동</button>
<button onclick="mvRight();">오른쪽으로 이동</button>
<button onclick="mvTo();">기본 위치로 이동</button>
</p>
<p>
<button onclick="sizeQuater();">4분의 1 크기</button>
<button onclick="size500300();">500*300 크기</button>
<button onclick="sizeDefault();">기존 크기</button>
</p>
<p id="BrowserInfo"></p>

function newWindow(){
newWindow = window.open("", "", "width=350, height=200, top=100, left=100");
newWindow.document.write("
새로운 창
창 닫기");
}
function mvUp(){
newWindow.moveBy(0, -10);
newWindow.focus();
newWindow.document.getElementById("info").innerHTML =  "moveBy()로 기존 위치에서 y축 기준 위로 10px 이동";
}
function mvDown(){
newWindow.moveBy(0, 10);
newWindow.focus();
newWindow.document.getElementById("info").innerHTML =  "moveBy()로 기존 위치에서 y축 기준 아래로 10px 이동";
}
function mvLeft(){
newWindow.moveBy(-10, 0);
newWindow.focus();
newWindow.document.getElementById("info").innerHTML =  "moveBy()로 기존 위치에서 x축기준 왼쪽으로 10px 이동";
}
function mvRight(){
newWindow.moveBy(10, 0);
newWindow.focus();
newWindow.document.getElementById("info").innerHTML =  "moveBy()로 기존 위치에서 x축기준 오른쪽으로 10px 이동";
}
function mvTo(){
newWindow.moveTo(100, 100);
newWindow.focus();
newWindow.document.getElementById("info").innerHTML =  "moveTo()로 화면 전체에서 top=100px, left=100px 위치에 윈도우 창 놓기";
}
function sizeQuater(){
newWindow.resizeTo(window.screen.availWidth / 2, window.screen.availHeight / 2);
newWindow.focus();
}
function size500300(){
newWindow.resizeTo(500, 300);
newWindow.focus();
}
function sizeDefault(){
newWindow.resizeTo(350, 200);
newWindow.focus();
}
function browserInfo(){
document.getElementById("BrowserInfo").innerHTML = "현재 실행 중인 창의 크기는 가로: " + window.innerWidth + "px, 세로: " + window.innerHeight + "px 입니다.";
}

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기