screen, window
속성 [Window](https://developer.mozilla.org/en-US/docs/Web/API/Window)은 screen창과 연결된 화면 개체에 대한 참조를 반환합니다. screen 인터페이스 를 구현하는 개체는 현재 [Screen](https://developer.mozilla.org/en-US/docs/Web/API/Screen)창이 렌더링되는 화면의 속성을 검사하기 위한 특수 개체입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 기본 10 - screen & window</title>
<style>
.btn:hover {
color: white;
background-color: brown;
cursor: pointer;
}
p {
font-size: 20px;
}
p:hover {
background-color: burlywood;
cursor: pointer;
}
</style>
</head>
<body>
<div class="btn" id="btn1">window 객체 속성 출력</div>
<div class="btn" id="btn4">screen 객체 속성 출력</div>
<div class="btn" id="btn2">객체 속성 인쇄</div>
<div class="btn" id="btn3">창 닫기</div>
<div id="res"></div>
<script>
var btn1 = document.getElementById('btn1')
var btn2 = document.getElementById('btn2')
var btn3 = document.getElementById('btn3')
var btn4 = document.getElementById('btn4')
var res = document.getElementById('res')
btn1.addEventListener("click", function() {
req1() // 출력
})
btn2.addEventListener("click", function() {
window.print() // 인쇄
})
btn3.addEventListener("click", function() {
window.close() // 창 닫기
})
btn4.addEventListener("click", function() {
req2() // 출력
})
function req1() {
var html = ""
for(var key in window) {
html += "<p>"+key+" : "+window[key]+"</p>";
}
res.innerHTML = html
}
function req2() {
var html = ""
for(var key in screen) {
html += "<p>"+key+" : "+screen[key]+"</p>";
}
res.innerHTML = html
}
</script>
</body>
</html>
자바 풀 스택 주니어 개발자