[TCP School/자바스크립트] 브라우저 객체 모델(BOM) - Window 객체
브라우저 객체 모델
자바스크립트를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있다.
이 때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)이다.
브라우저 객체 모델은 문서 객체 모델과 달리 W3C의 표준 객체 모델은 아니다.
하지만 이 모델은 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해준다.
Window 객체
window 객체는 웹 브라우저의 창을 나타내는 객체로, 대부분의 웹 브라우저에서 지원하고 있다.
자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 된다.
window 객체의 메소드는 전역 함수이며, 프로퍼티는 전역 변수가 된다.
문서 객체 모델의 요소들도 모두 window 객체의 프로퍼티가 된다.
브라우저 창 크기 조절
window 객체의 innerHeight와 innerWidth 프로퍼티를 이용하면, 브라우저의 창 크기를 조절할 수 있다.
여기서 브라우저의 창이란 웹 브라우저의 뷰포트를 의미하며, 브라우저의 툴바나 스크롤 바는 포함되지 않는다.
window.innerHeight
window.innerWidth
// 익스플로러 5부터 7버전만을 위한 문법1
document.documentElement.clientHeight
document.documentElement.clientWidth
// 익스플로러 5부터 7버전만을 위한 문법2
document.body.clientHeight
document.body.clientWidth
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>innerHeight, innerWidth</title>
</head>
<body>
<h1>브라우저 창 크기 조절</h1>
<p>웹 브라우저의 창 크기를 조절한 뒤 새로고침</p>
<script>
var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
document.write('웹 브라우저의 너비는 ' + windowWidth + '픽셀이고, 높이는 ' + windowHeight + '픽셀입니다.');
</script>
</body>
</html>
window 객체의 모든 메소드나 프로퍼티를 사용할 때는 window라는 접두사를 생략할 수 있다.
따라서 위 예제에서 모든 window 접두사를 생략해도 그대로 동작한다.
브라우저 새 창 열기
window 객체의 open() 메소드를 이용하면, 새로운 브라우저 창을 열 수 있다.
또한, 새로운 브라우저 창의 세부적인 옵션들도 설정할 수 있다.
이 옵션에서 사용할 수 있는 프로퍼티는 다음 이미지와 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>open</title>
</head>
<body>
<h1>브라우저 새 창 열기</h1>
<button onclick="openWindow()">새로운 창 열기</button>
<script>
var newWindowObj;
var strWindowFeatures = 'memubar = yes, location = yes, resizable = yes, scrollbars = yes, status = yes';
function openWindow() {
newWindowObj = window.open('http://www.tcpschool.com/html/intro', 'HTML 개요', strWindowFeatures);
}
</script>
</body>
</html>
브라우저 창 닫기
window 객체의 close() 메소드를 이용하면, 현재 브라우저나 특정 브라우저 창을 닫을 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>open</title>
</head>
<body>
<h1>브라우저 새 창 열기</h1>
<button onclick="openWindow()">새로운 창 열기</button>
<button onclick="closeNewWindow()">새로 연 창 닫기</button>
<script>
var newWindowObj;
var strWindowFeatures = 'memubar = yes, location = yes, resizable = yes, scrollbars = yes, status = yes';
function openWindow() {
newWindowObj = window.open('http://www.tcpschool.com/html/intro', 'HTML 개요', strWindowFeatures);
}
function closeNewWindow() {
newWindowObj.close();
}
</script>
</body>
</html>
open() 메소드의 예제 코드와 동일하게 동작하고 '새로 연 창 닫기' 버튼을 누르면 새 창이 사라진다.
TCP School의 강의 내용을 정리한 포스트입니다.
http://www.tcpschool.com/javascript/intro
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
'공부 > JavaScript' 카테고리의 다른 글
| [TCP School/자바스크립트] 브라우저 객체 모델(BOM) - History 객체 (0) | 2023.04.25 |
|---|---|
| [TCP School/자바스크립트] 브라우저 객체 모델(BOM) - Location 객체 (0) | 2023.04.25 |
| [TCP School/자바스크립트] 문서 객체 모델(DOM) - 노드의 조작 (0) | 2023.04.25 |
| [TCP School/자바스크립트] 문서 객체 모델(DOM) - 노드의 관리 (0) | 2023.04.24 |
| [TCP School/자바스크립트] 문서 객체 모델(DOM) - 노드리스트 (0) | 2023.04.24 |
