Browser Object Model,
BOM은 ECMAScript,
DOM(Document Object Model)와 함께
JavaScript를 구성하는 3가지 요소 중 하나이다.
BOM은 웹페이지의 컨텐츠에 관계없이 브
라우져에 대한 정보를 제공해주는 객체이다.
window 객체와 global 스코프
이런
BOM의 중심에는
window 객체가 함께하고 있는데, 이
window 객체는 브라우져 윈도우의 정보를 저장함과 동시에 ECMAScript의
Global 객체의 역할을 수행하기도 한다. 즉, 우리가 작성하는 스크립트 내에서 선언되는 모든 객체, 변수, 함수들이
global 객체인
window 객체 내의 프로퍼티(property)로써 선언된다는 뜻이며, window 객체가 global scope의 역할을 수행한다는 말이다.
아래 코드를 보자.
var t = "test";
function printT(){
console.log(t); //test
}
printT();
console.log(window.t); //test
window.printT(); //test
console.log(delete window.t); //false
console.log(delete window.printT); //false
window.g = "window";
console.log(g); //window
console.log(delete window.g); //true
console.log(window.g); //undefine
console.log(g); //error
선언된
변수 t 는
window 객체를 이용해 접근이 가능하기도,
window 객체를 통하지 않고도 접근이 가능하다. 선언된 함수
printT 또한
window 객체를 이용해 접근이 가능하다.
이렇게 글로벌 스코프에서 선언된 함수들과 변수들이 window 객체의 프로퍼티가 되지만, 실제
window 객체의 프로퍼티로써 선언된 변수와 함수들과는 작은 차이를 가진다.
바로
delete 키워드를 이용해 객체의 프로퍼티를 삭제할 때의 경우인데, 이 경우에는
window 객체를 통해서 선언되지 않은 함수들과 변수들은 삭제가 불가능하다.
위의 코드에서
window 객체를 통하지 않고 선언된 변수
t 와 함수
printT의 경우에는
delete 키워드를 이용해 프로퍼티 삭제를 시도할 경우에
false 값을 반환하게 된다. 하지만
window 객체를 통해 선언된 프로퍼티
g 같은 경우에는
delete 키워드를 이용해 삭제를 시도할시 true 값을 반환하며 성공적으로 프로퍼티를 삭제하게 된다. 이는 var 키워드를 이용해 선언된 변수들의
configurable attribute(Property Attribute 중 하나,
참조글)가
false로 세팅되기 때문이다.
window 객체와 BOM(Browser Object Model)
HTML frame
웹페이지에 존재한는 모든 frame 태그들은 window.frames 프로퍼티를 통해 접근이 가능하다. window.frame 프로퍼티는 콜랙션 프로퍼티로 frame 태그들은 html 코드에 적힌 순서대로 frame 프로퍼티에 저장된다(window.frame[index], index는 0부터 시작한다).
window 객체와는 별개로 최상위 frame(Browser Window)를 참조하는 top 객체 또한 존재하는데, top 객체의 frames 프로퍼티를 이용해 하위 프레임에 접근하는 것도 가능하다.
<html>
<head>
<title></title>
</head>
<frame name="fr1" src="frame01.html"></frame>
<frame name="fr2" src="frame02.html"></frame>
<frame name="fr3" src="frame03.html"></frame>
<body>
<script type="text/javascript">
var fr1 = window.frames[0];
var fr2 = window.frames[1];
var fr3 = top.frames[3];
</script>
</body>
</html>
Position
window 객체는 screenX 프로퍼티와 screenY 프로퍼티를 통해 현재 웹브라우저 윈도우의 위치를 제공한다.
window.screenX
window.screenY
//각각의 프로퍼티는 브라우져 최상단 좌측 픽셀의 위치를 알려준다.
Size
window 객체의 outherWidth, outherHeight, innerWidth, innerHeight 프로퍼티를 통해 브라우져 윈도우의 너비,높이와, 웹페이지가 표시되는 top frame의 너비,높이에 접근할 수 있다.
window.outerHeight
//1040
window.outerWidth
//1920
window.innerHeight
//955
window.innerWidth
//1153
Pop Up Window, 팝업 윈도우
window.open 메소드는 사용자가 새로운 팝업 윈도우를 열거나 특정 윈도우를 원하는 URL로 향할수있게 만들어준다.
window.open("http://google.com", "_blank");
//위의 코드는 아래의 html 코드와 같은 기능을 한다.
<a href = "http://google.com" target = "_blank">
window.open 메소드는 3개의 String 아규먼트를 받는다. 3개의 argument 들은 모두 optional argument 이니, 이 argument들 없이도 window.open 메소드를 호출하는게 가능하다.
- 새로 오픈할 윈도우의 url
- 타겟 윈도우 프레임의 name 속성
- _blank : 새로운 윈도우
- _self : 현재 코드가 실행된 프레임
- _top : 현재 코드가 실행된 프레임의 최상위 프레임
- _parent : 현재 코드가 실행된 프레임 의 parent 프레임
- 원하는 윈도우 프레임 이름 : 만약 해당 name 아트리뷰트를 가진 프레임이 존재하지 않을 경우에 _blank와 같이 새로운 윈도우가 실행되며, 실행된 윈도우 프레임의 name attribute 가 전달된 윈도우 프레임 이름으로 설정된다.
- full screen, height, width 등 각종 설정 옵션들을 모아 놓은 specification string, 설정 가능한 스펙들은 아래와 같다.
| 설정 이름 | 값 | |
| height | 숫자 | 새 윈도우의 height 값, 최소값은 100 |
| width | 숫자 | 새 윈도우의 width 값, 최소값은 100 |
| location | "yes" 또는 "no" | location 바가 표시되어야 하는지, 기본값은 no |
| menubar | "yes" 또는 "no" | menu 바가 표시되어야 하는지, 기본값은 no |
| resizable | "yes" 또는 "no" | 사이즈 조절이 가능한지, 기본값은 no |
| scrollbars | "yes" 또는 "no" | 스크롤링이 가능한지, 기본값은 no |
| status | "yes" 또는 "no" | status 바가 표시되어야 하는지, 기본값은 no |
| toolbar | "yes" 또는 "no" | 툴바가 표시되어야하는지, 기본값은 no |
| left | 숫자 | 윈도우의 (0,0) 픽셀의 위치 x값, 최소값은 0 |
| top | 숫자 | 윈도우의 (0,0) 픽셀의 위치 y값, 최소값은 0 |
height 500, width 500 사이즈 윈도우를 화면의 (50,50)위치에서 열기위해서는
"height=500,width=500,top=50,left=50" 문자열을 3번째 argument로 전달해주면 된다.
System Dialog
alert, confirm, prompt 메소드를 이용해 알림창, 확인창, 입력창을 띄울 수 있다.
window.alert()
alert() 메소드는 알림창을 띄울때 사용된다.
window.alert("알림창입니다.")
 |
| alert 창 |
위의 코드는 이와 같은 창을 띄우게 된다.
window.confirm()
confirm 메소드는 확인창을 띄울때 사용한다.
var s = window.confirm("confirm 창입니다.")
 |
| confirm 창 |
confirm 메소드는 위와같이 확인창을 띄우며 user가 ok버튼을 누를시 true 값을 cancel 버튼을 누를시 false값을 리턴한다.
window.prompt()
prompt 메소드는 user로부터 문자열을 받아올 때 사용한다.
var s = window.prompt("prompt 창입니다.")
 |
| prompt 창 |
prompt 메소드를 호출할시 위와같은 창을 띄우게 되며, 사용자가 ok 버튼을 누를시에 입력된 문자열을, cancel 버튼을 누를시에 null 값을 리턴한다.
