<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.area {
background:lightgray;
border:1px solid black;
width:300px;
height:100px;
font-size:40px;
color:red;
}
.area-big {
background:lightgray;
border:1px solid black;
height:300px;
}
</style>
</head>
<body>
<h1>window 객체</h1>
<p>window 객체는 자바스크립트의 최상위 객체이며
BOM과 DOM으로 나뉜다.</p>
<p>BOM(Browser Object Model) : location 객체, navigator 객체,
history 객체, screen 객체</p>
<p>DOM(Document Object Model) : document 객체</p>
<h3>window 객체</h3>
<p>브라우저 창에 대한 설정을 하는 객체<br>
window 키워드는 전에 말했듯이 생략이 가능하다.</p>
<button onclick="test1();">네이버</button>
<button onclick="test2();">다음</button>
<script type="text/javascript">
function test1() {
// window.open(); 새 탭 띄어주기
// window.open('팝업 주소', '팝업 이름', '팝업 설정');
window.open("http://www.naver.com", "네이버", "location=0, resizeable=no, menubar=no, status=no, toolbar=no");
// 크롬 브라우져에선 대부분 지원하지 않음, 열기 기능만 됨, ie는 거의 지원
// w3schools 에서 확인해볼것
}
function test2() {
window.open("http://www.daum.net", "", "width=500, height=300");
}
</script>
<br>
<h3>window객체의 timer 메소드</h3>
<h4>setTimeout()</h4>
<button onclick="test3();">실행확인</button>
<script type="text/javascript">
function test3() {
var myWindow = window.open();
myWindow.alert("3초 뒤에 이 페이지는 종료됩니다.");
window.setTimeout(function() {
myWindow.close();
}, 3000);
// 3000 밀리 초 후에 지정한 함수가 작동함
}
</script>
<br>
<h4>setInterval() : 지정한 시간마다 반복될 함수, ex) 시계</h4>
<button onclick="test4();">실행확인</button>
<div id="area1" class="area"></div>
<script type="text/javascript">
function test4() {
var area1 = document.getElementById("area1");
window.setInterval(function() {
var date = new Date();
area1.innerHTML = date.getHours() + " : " + date.getMinutes() + " : " + date.getSeconds();
}, 1000);
}
</script>
<br>
<h4>clearInterval() : setInterval()을 종료함</h4>
<button onclick="test5();">실행확인</button>
<div id="area2" class="area"></div>
<script type="text/javascript">
function test5() {
var area2 = document.getElementById("area2");
var count = 10;
var intervalId = window.setInterval(function() {
area2.innerHTML = "countDown : " + count--;
setTimeout(function() {
clearInterval(intervalId);
area2.innerHTML = "종료!";
}, 10000);
}, 1000);
}
</script>
<hr>
<h3>screen 객체</h3>
<p>웹 브라우저 화면이 아닌 운영체제 화면의 속성을 가지는 객체이다.</p>
<button onclick="test6();">실행확인</button>
<script type="text/javascript">
function test6() {
var width = screen.width;
var height = screen.height;
child = window.open("", "", "width=800, height=500");
// 윈도우 절대 크기 조절
child.resizeTo(width, height);
setInterval(function() {
// 윈도우 상대 크기 조절
child.resizeBy(-20, -20);
// 윈도우 상대 위치 조절
child.moveBy(10, 10);
}, 10);
console.log("화면 너비 : " + width);
console.log("화면 높이 : " + height);
console.log("실제 화면에서 사용 가능한 너비 : " + screen.availWidth);
console.log("실제 화면에서 사용 가능한 높이 : " + screen.availHeight);
console.log("사용 가능한 색상 수 : " + screen.colorDepth);
console.log("한 픽셀당 비트 수 : " + screen.pixelDepth);
}
</script>
<hr>
<h3>location 객체</h3>
<p>브라우저 주소 표시줄과 관련된 객체이다.<br>
현재 창의 주소같은 여러가지 정보를 담고 있으며 속성을 변경하면<br>
어떤 링크를 눌렀을 때 새로운 창으로 여는것이<br>
아닌 현재 창에서 여는것이 가능하다</p>
<button onclick="test7();">실행확인</button>
<div id="area3" class="area-big"></div>
<script type="text/javascript">
function test7() {
var area3 = document.getElementById("area3");
for (var key in location) {
area3.innerHTML += key + " : " + location[key] + "<br>";
}
}
</script>
<button onclick="location.href='http://www.naver.com'">네이버로 이동</button>
<button onclick="location='http://www.naver.com'">네이버로 이동</button>
<!-- href는 정말 많이 쓰는 기능으로 생략을 허용한다. -->
<br><br>
<!-- 자기 자신을 붙이면 새로고침이 된다, 완전 새로 로드하기 때문에 기존의 스크롤 위치나 정보는 날아간다. -->
<button onclick="location.href=location.href">새로고침</button>
<button onclick="location=location">새로고침</button>
<!-- reload는 스크롤 위치를 그대로 유지하고 새로고침이 된다. -->
<button onclick="location.reload()">새로고침</button>
<br><br>
<button onclick="location.assign('http://google.com')">구글로 이동</button>
<!-- replace는 뒤로가기를 할 수 없다. -->
<button onclick="location.replace('http://google.com')">구글로 이동</button>
<!-- 자주 쓰이므로 중요한 기능들이다. -->
<hr>
<h3>navigator 객체</h3>
<p>웹 페이지를 실행하고 있는 브라우저에 대한 정보를 가진 객체</p>
<button onclick="test8();">실행확인</button>
<div id="area8" class="area-big"></div>
<script type="text/javascript">
function test8() {
var str = "";
for (var key in navigator) {
str += key + " : " + navigator[key] + "\n";
}
alert(str);
var area8 = document.getElementById("area8");
area8.innerHTML += "브라우저의 코드명 : " + navigator.appCodeName + "<br>";
area8.innerHTML += "브라우저의 이름 : " + navigator.appName + "<br>";
area8.innerHTML += "브라우저 전체 정보 : " + navigator.userAgent + "<br>";
area8.innerHTML += "브라우저 언어 : " + navigator.language + "<br>";
area8.innerHTML += "사용중인 운영체제 : " + navigator.platform + "<br>";
}
</script>
</body>
</html>