location 객체는 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용할 수 있다.
이 객체는 Window 객체의 location 프로퍼티와 Document 객체의 location 프로퍼티에 같이 연결되어 있다. location 객체의 프로퍼티와 메소드를 이용하면, 현재 문서의 URL 주소를 다양하게 해석하여 처리할 수 있다.
location 객체의 href 프로퍼티는 현재 문서의 전체 URL 주소를 문자열로 반환한다.
🔔 예제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript BOM Location Object</title>
</head>
<body>
<h1>현재 문서의 URL 주소</h1>
<script>
document.write("현재 문서의 URL 주소는 " + location.href + "입니다.");
</script>
</body>
</html>
실행 결과
location 객체의 hostname 프로퍼티는 현재 문서의 인터넷 호스트 이름을 반환한다.
🔔 예제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript BOM Location Object</title>
</head>
<body>
<h1>현재 문서의 호스트 이름</h1>
<script>
document.write("현재 문서의 호스트 이름은 " + location.hostname + "입니다.");
</script>
</body>
</html>
실행 결과
💡 TIP ? host, hostname, port, hash와 같은 location 객체의 주용 프로퍼티는 URL 주소의 다양한 특성을 저장하고 있다. 이와 같은 프로퍼티는 Link 객체를 통해서도 제공된다.
location 객체의 pathname 프로퍼티는 현재 문서의 파일 경로명을 반환한다.
🔔 예제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript BOM Location Object</title>
</head>
<body>
<h1>현재 문서의 파일 경로명</h1>
<script>
document.write("현재 문서의 파일 경로명은 " + location.pathname + "입니다.");
</script>
</body>
</html>
실행 결과
💡 TIP ? 호스트 이름(host name)과 파일 경로명(path name)을 합쳐 URL(Unoform Resource Locator)이라고 부른다. 이러한 URL은 브라우저가 웹 서버로 컨텐츠를 요청할 때, 해당 컨텐츠가 어디에 있는지를 알려주기 위한 규약이다.
location 객체의 assign() 메소드는 브라우저 창에 지정한 URL 주소에 존재하는 문서를 불러온다.
반면에 replace() 메소드는 새 문서를 불러오기 전에, 현재 문서를 브라우저의 히스토리에서 제거한다는 점이 assign() 메소드와 다르다. location 객체의 reload() 메소드는 브라우저 창에 현재 문서를 다시 불러온다.
문법
function openDocument() {
location.assign("/index.php");
}
function openDocumentWithReplace() {
location.replace("/index.php");
}
💡 TIP ? 현재 문서를 브라우저의 히스토리에서 제거한다는 의미는 브라우저의 뒤로 가기 버튼을 눌러도 이전 페이지로 다시 돌아갈 수 없다는 의미이다.
history 객체는 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체이다.
자바스크립트는 사용자의 개인 정보를 보호하기 위해 이 객체에 접근하는 방법을 일부 제한하고 있다.
history 객체의 length 프로퍼티는 브라우저 히스토리 목록의 개수를 반환한다.
🔔 예제)
function openDocument() {
location.assign("/javascript/js_bom_history");
}
document.getElementById("text").innerHTML = "현재 브라우저의 히스토리 목록의 개수는 " + history.length + "개 입니다.";
history 객체에는 브라우저의 뒤로 가기와 앞으로 가기 버튼과 같은 동작을 하는 back()과 forward() 메소드를 가지고 있다.
또한, go() 메소드를 이용하면 인수로 전달 받는 정수만큼 히스토리 목록 사이를 이동할 수도 있다.
다음 예제는 back() 메소드를 이용하여 브라우저의 히스토리 목록에서 바로 이전 URL로 이동하는 예제이다. 이 버튼은 브라우저의 이전 페이지로 가기 버튼과 같은 동작을 한다.
🔔 예제)
<button onclick="goBack()">이전 페이지로 가기</button>
...
<script>
function goBack() {
window.history.back();
}
</script>
다음 예제는 go() 메소드를 이용하여 back() 메소드와 같은 동작을 하도록 만든 예제이다.
🔔 예제)
<button onclick="go()">이전 페이지로 가기</button>
...
<script>
function go() {
window.history.go(-1);
}
</script>
위의 예제에서처럼 go() 메소드에 인수로 -1을 전달하면 back() 메소드와 같은 동작을 하게 된다.
다음 예제는 forward() 메소드를 이용하여 브라우저의 히스토리 목록에서 바로 다음 URL로 이동하는 예제이다.
이 버튼은 브라우저의 다음 페이지로 가기 버튼과 같은 동작을 한다.
🔔 예제)
<button onclick="goForward()">다음 페이지로 가기</button>
...
<script>
function goForward() {
window.history.forward();
}
</script>
screen 객체는 사용자의 디스플레이 화면에 대한 다양한 정보를 저장하는 객체이다.
screen 객체의 width와 height 프로퍼티는 사용자의 디스플레이 화면의 크기를 픽셀 단위로 반환한다.
🔔 예제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript BOM Screen Object</title>
</head>
<body>
<h1>사용자의 화면 크기</h1>
<script>
document.write("현재 사용자의 디스플레이 화면의 너비는 " + screen.width + "픽셀입니다.<br>");
document.write("현재 사용자의 디스플레이 화면의 높이는 " + screen.height + "픽셀입니다.<br>");
document.write("현재 브라우저 창의 너비는 " + window.outerWidth + "픽셀입니다.<br>");
document.write("현재 브라우저 창의 높이는 " + window.outerHeight + "픽셀입니다.<br>");
</script>
</body>
</html>
실행 결과
💡 TIP ? screen.width 와 screen.height는 현재 사용자의 모니터 화면의 크기를 반환한다. 하지만 window.outerWidth와 window.outerHeight는 현재 브라우저 창의 크기를 반환한다.
screen 객체의 availWidth와 availHeight 프로퍼티는 실제 사용할 수 있는 화면의 크기를 픽셀 단위로 반환한다.
이 프로퍼티는 운영체제의 작업 표시줄과 같은 공간을 모두 제외한 크기를 반환한다.
🔔 예제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript BOM Screen Object</title>
</head>
<body>
<h1>실제 사용할 수 있는 화면 크기</h1>
<script>
document.write("실제 사용할 수 있는 화면의 너비는 " + screen.availWidth + "픽셀입니다.<br>");
document.write("실제 사용할 수 있는 화면의 높이는 " + screen.availHeight + "픽셀입니다.");
</script>
</body>
</html>
실행 결과
💡 TIP ? 트루 컬러에서 한 색상당 사용할 수 있는 비트 수는 2에 24승 = 16,777,216 이다.
screen 객체의 pixelDepth 프로퍼티는 사용자 화면에서 픽셀당 표시할 수 있는 비트 수를 반환한다.
🔔 예제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript BOM Screen Object</title>
</head>
<body>
<h1>화면 픽셀당 표시할 수 있는 비트수</h1>
<script>
var bitPixelDepth = screen.pixelDepth;
document.write("사용자 화면의 한 픽셀당 표시할 수 있는 비트수는 " + bitPixelDepth + "개입니다.");
</script>
</body>
</html>
실행 결과
💡 TIP ? 대부분의 컴퓨터에서 colorDepth와 pixelDepth는 같은 값을 가진다.
| [JavaScript] 이벤트 (0) | 2018.10.22 |
|---|---|
| [JavaScript] Navigator 객체 / 대화 상자 / 타이머 (0) | 2018.10.22 |
| [JavaScript] Window 객체 (0) | 2018.10.22 |
| [JavaScript] 노드의 조작 (0) | 2018.10.22 |
| [JavaScript] 노드의 관리 (0) | 2018.10.22 |