Window

• 웹 브라우저의 창(window)을 나타내는 객체
• 문서 객체 모델(DOM)의 요소들도 모두 window 객체의 프로퍼 티가 됨

Window: 브라우저 창크기

브라우저 창 크기 조절하기

<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>

window : 브라우저 창 열기

<h1>브라우저 새  창  열기</h1>
<button onclick="openWindow()">새로운  창  열 기</button>

<script>
var newWindowObj;
// 변수 strWindowFeatures를 통해 새롭게  여는 웹 브라우저 창의 옵션들을 일일이 설정할 수 있 음.

var strWindowFeatures = "menubar = yes, location = yes, resizable = yes, scrollbars = yes, stat us = yes";

function openWindow() { 
  newWindowObj  = window.open("https://www.google.com", strWindowFeatures);
} 

</script>

window : 브라우저 창닫기

<h1>브라우저 창  닫기</h1>
<button onclick="openWindow()">새로운  창  열기</button> 
<button onclick="closeNewWindow()">새로 연  창  닫기</button>

<script>
var newWindowObj;
var strWindowFeatures = "menubar = yes,location = yes,resizable = yes,scrollbars = yes,status = yes";

function openWindow() {
newWindowObj  = window.open("/html/intro", "HTML 개요", strWindowFeatures);
}

function closeNewWindow() { // window 객체를 이용해 다시 닫을 수 있음.
newWindowObj.close(); }
</script>

---

Location

• 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용
• Window 객체의 location 프로퍼티와 Document 객체의 location 프로 퍼티에 같이 연결

예제

document.write("현재 문서의 주소는 " + location.href + "입니다.");
document.write("현재 문서의 호스트 이름은 " + location.hostname + "입니다.");
document.write("현재 문서의 파일 경로명은 " + location.pathname + "입니다.");

결과
현재 문서의 주소는 http://127.0.0.1:5500/test2.html입니다.현재 문서의 호스트 이름은 127.0.0.1입니다.현재 문서의 파일 경로명은 /test2.html입니다.

History: back(), go()

브라우저의 히스토리 목록에서 바로 이전 URL로 이동

back()

window.history.back();

go()

window.history.go(-1);

History: forward()

브라우저의 히스토리 목록에서 바로 다음 URL로 이동

window.history.forward();

---

Screen

1) screen.width 2) screen.height 3) screen.outerHeight

document.write("현재 사용자의 디스플레이 화면의 너비는 " +  screen.width + "픽셀입니다.<
br>");
document.write("현재 사용자의 디스플레이 화면의 높이는 " +  screen.height + "픽셀입니다.
<br>");
document.write("현재 브라우저 창의 너비는 " + window.outerWidth + "픽셀입니다.<br>"); document.write("현재 브라우저 창의 높이는 " + window.outerHeight + "픽셀입니다.<br>");

---

Navigator

브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 다 양한 정보를 저장

document.write("현재 사용 중인 브라우저의 버전 정보는 " + navigator.appVersion + " 입니다.<br><br>");