* 브라우저 객체 모델(BOM : Browser Object Model)
- 웹 브라우저와 관련된 객체의 집합(window, location, navigator, history, screen, document)
- document 객체는 문서 객체 모델(DOM : Document Object Model) 이라 통합해서 부름
1. window 객체
- 브라우저 기반 자바스크립트의 최상위 객체
- var 키워드로 선언한 일반 변수도 모두 window 객체의 속성이 됨
1.1. 새로운 window 객체 생성
- open() 메서드는 새로운 window 객체를 생성하는 메서드
<script type="text/javascript">
window.open();
window.open('http://gangzzang.tistory.com/', 'Gz', 'width=500 height=500', true);
</script>
|
메서드명 |
설명 |
|
open(URL, name, features, replace) |
새로운 window 객체를 생성 |
- 첫번째 매개변수 : HTML 페이지의 URL
- 두번째 매개변수 : 윈도 간 통신하는 데 사용하는 윈도 이름
- 세번째 매개변수 : 윈도를 어떤 모양으로 출력할지 지정
|
옵션명 |
설명 |
입력할 수 있는 값 |
|
height |
새 윈도의 높이 |
픽셀 값 |
|
width |
새 윈도의 너비 |
픽셀 값 |
|
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 |
- 네번째 매개변수 : 히스토리 목록에 현재 문서를 대체 혹은 새 항목 여부
- 새로운 윈도 객체에 접근해 속성과 메서드를 사용 가능
1.2. window 객체의 기본 메서드
- 자신의 형태와 위치를 변경할 수 있는 메서드를 제공
- XXBy() 형태의 메서드는 현재 윈도를 기준으로 상대적으로 속성을 변화
- XXTo() 형태의 메서드는 절대적인 기준으로 속성을 변화
|
메서드명 |
설명 |
|
moveBy(x, y) |
윈도의 위치를 상대적으로 이동 |
|
moveTo(x, y) |
윈도의 위치를 절대적으로 이동 |
|
resizeBy(x, y) |
윈도의 크기를 상대적으로 지정 |
|
resizeTo(x, y) |
윈도의 크기를 절대적으로 지정 |
|
scrollBy(x, y) |
윈도 스크롤의 위치를 상대적으로 이동 |
|
scrollTo(x, y) |
윈도 스크롤의 위치를 절대적으로 이동 |
|
focus() |
윈도에 초점을 맞춤 |
|
blur() |
윈도에 초점을 제거 |
|
close() |
윈도를 닫음 |
<!-- window.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window</title>
<script type="text/javascript">
var child = window.open('', '', 'width=300, height=200');
child.moveTo(0, 0);
setInterval(function() {
child.moveBy(10, 10);
}, 1000);
</script>
</head>
<body>
</body>
</html>
2. screen 객체
- 웹 브라우저의 화면이 아니라 운영체제 화면의 속성을 가지는 객체
<!-- screen.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>screen</title>
<script type="text/javascript">
var output = '';
for (var i in screen) {
output += '※ ' + i + ' : ' + screen[i] + '\n';
}
alert(output);
</script>
</head>
<body>
</body>
</html>
- screen 객체의 속성
|
속성명 |
설명 |
|
width |
화면의 너비 |
|
height |
화면의 높이 |
|
availWidth |
실제 화면에서 사용 가능한 너비 |
|
availHeight |
실제 화면에서 사용 가능한 높이 |
|
colorDepth |
사용 가능한 색상 수 |
|
pixelDepth |
한 픽셀당 비트 수 |
3. location 객체
- 브라우저의 주소 표시줄과 관련된 객체
- 프로토콜의 종류, 호스트 이름, 문서 위치 등의 정보
<!-- location.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>location</title>
<script type="text/javascript">
var output='';
for (var i in location) {
output += '※ ' + i + ' : ' + location[i] + '\n';
}
alert(output);
</script>
</head>
<body>
</body>
</html>
- location 객체의 속성
|
속성명 |
설명 |
예 |
|
href |
문서의 URL 주소 |
http://gangzzang.tistory.com/ |
|
host |
호스트 이름과 포트 번호 |
localhost:8099 |
|
hostname |
호스트 이름 |
localhost |
|
port |
포트 번호 |
8099 |
|
pathname |
디렉토리 경로 |
/hello_javascript/location.html |
|
hash |
앵커 이름(#~) |
#beta |
|
search |
요청 매개변수 |
?param=10 |
|
protocol |
프로토콜 종류 |
http: |
- location 객체의 메서드
|
메서드명 |
설명 |
|
assign(link) |
현재 위치를 이동 |
|
reload() |
새로고침 |
|
replace(link) |
현재 위치를 이동(뒤로 가기 버튼을 사용할 수 없음) |
'Web > JavaScript' 카테고리의 다른 글
| 자바스크립트(JavaScript) 이벤트(Event) (0) | 2013.11.21 |
|---|---|
| 자바스크립트(JavaScript) 문서 객체 모델(DOM : Document Object Model) (0) | 2013.11.19 |
| 자바스크립트(JavaScript) 메서드 체이닝(Method Chaining) (0) | 2013.11.18 |
| 자바스크립트(JavaScript) 생성자 함수(constructor) (4) | 2013.11.18 |
| 자바스크립트(JavaScript) 객체 (2) | 2013.11.15 |