<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/*
자바스크립트 내장 객체
- 자바스크립트에서 제공되는 객체 => 별도의 선언없이 사용 가능
[ window 객체 ]
- 자바스크립트의 최상위(루트) 객체
- 자바스크립트 전역에서 사용(접근) 가능한 객체
- 웹브라우저 창(browser window)을 가리키는 용도로 사용되며
창에 대한 다양한 작업을 수행할 수 있는 여러가지 함수 제공
=> window 객체의 함수 호출 시 객체명은 생략 가능함
ex) window.open() => open() 으로만 지정해도 호출 가능
[ window 객체의 하위 객체들 ]
1. document
- DOM(Document Object Model = 문서 객체 모델) 이라고 함
- 웹 페이지 내의 모든 컨텐츠(문서의 내용)를 document 객체로 관리(= 수정 가능함)
- 특정 웹페이지의 시작점 역할을 수행하므로 document 객체를 사용하면
웹페이지 내의 모든 요소들을 변경 가능하고, 생성도 가능함
2. navigator, location, history 등...
- BOM(Browser Object Model = 브라우저 객체 모델) 이라고 함
- 웹 페이지 내의 문서 내용(컨텐츠) 외의 모든 요소를 관리
=> 웹브라우저 정보, 운영체제 정보, 페이지 정보 등
3. object, array, function 등
*/
function showWindowInfo() {
// window 객체를 활용하여 창에 대한 정보 확인 및 제어 가능
// 현재 열려있는 웹브라우저(창)의 높이와 너비 확인
alert("창 높이 : " + window.innerHeight + ", 창 너비 : " + window.innerWidth);
}
function changeBackgroundColor() {
// document 객체를 활용하여 문서 내의 요소에 대한 확인 및 제어 가능
// 문서 배경색을 빨간색("RED") 으로 변경
document.body.style.background = "RED";
}
function connectUrl() {
// location 객체를 활용하여 페이지 이동(위치)에 대한 확인 및 제어 가능
// URL 을 입력받아 해당 페이지로 이동
// => 단, "XXXX 주소로 이동하시겠습니까?" 메세지가 출력되는 확인창을 통해
// 확인 버튼을 클릭했을 때만 이동
var url = prompt("URL 을 입력하세요", "http://");
// var isOk = confirm(url + " 주소로 이동하시겠습니까?");
// if(isOk) { // isOk == true 와 동일
// location.href = url;
// }
// 조건식에 confirm() 함수 직접 사용 가능
if(confirm(url + " 주소로 이동하시겠습니까?")) {
location.href = url;
}
}
function showBrowserInfo() {
// navigator 객체는 브라우저에 대한 정보 제공
alert("브라우저 정보 : " + navigator.userAgent + ", 브라우저 운영체제 정보 : " + navigator.platform);
}
</script>
</head>
<body>
<!-- "창 크기 확인", "배경색 변경", "URL 입력", "브라우저 정보 확인" 버튼 생성 -->
<input type="button" value="창 크기 확인" onclick="showWindowInfo()"><br>
<input type="button" value="배경색 변경" onclick="changeBackgroundColor()"><br>
<input type="button" value="URL 입력" onclick="connectUrl()"><br>
<input type="button" value="브라우저 정보 확인" onclick="showBrowserInfo()"><br>
</body>
</html>
