KH/JavaScript

JS_BOM(2) screen 객체, history 객체

오늘의 진 2022. 9. 26. 14:37

screen 객체 

: screen은 브라우저가 실행되는 스크린 장치에 관한 정보를 담고 있는 객체이다. 

 

screen객체는 다음과 같이 점근한다

window.screen 혹은 screen 

 

screen 객체의 프로퍼티 

availHeight 작업 펴시줄 등을 제외하고 브라우저가 출력 가능한 영역의 높이
availWidth 작업 표시줄 등을 제외하고 브라우저가 출력가능한 영역의 폭
pixelDepth 한 픽셀의 색을 나타내기 위해 사용되는 비트수
colorDepth 한 픽샐의 색을 나타내기 위해 사용되는 비트 수로서 pixelDepth와 동일. 
대부분의 브라우저에서 지원되므로 pixelDepth 보다 colorDepth를 사용할것을 권장
height 스크린의 수직 픽셀수
width 스크린의 수평 픽셀수 

 

 

history 객체

: history 객체는 사용자가 방문한 웹 페이지의 리스트, 즉 히스토리 정보를 담고 있는 객체로 다음과 같이 접근한다. 

 

window.history 혹은 history

 

history.back();  또는 history.go(-1); // 이전페이지로 이동 

history.forward(); 또는 history.go(1); // 다음페이지로 이동 

예를들어 history.go(3); 이라고하면 3만큼 다음페이지로 이동  

 

history 객체의 프로퍼티와 메소드 

프로퍼티 length 히스토리 리스트에 있는 엔트리 수 
메소드 back() 히스토리에 있는 이전 웹 페이지로 이동.
브라우저의 <back> 버튼과 동일
  forward() 히스토리에 있는 다음 웹 페이지로 이동.
브라우저의 <forward> 버튼과 동일
  go ( n ) 히스토리에서 현재 웹페이지에서 n만큼 상대적인 웹페이지로 이동 

 

 

 

 

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window.location으로 웹 사이트 접속</title>
<script>
    function load(){
        var select = document.getElementById("site");
        window.Location = select.options[select.selectedIndex].value;


        // 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에서 새 문서를 불러올 때 사용 할 수 있다. 
        // 이객체는 window 객체의 location 프로퍼티와 document 객체의 location 프로퍼티에 같이 연결되어 있다. 
        // location 객체의 프로퍼티와 메소드를 이용하면, 현재 문서의 url 주소를 다양하게 해석하여 처리 할 수 있다.

    }
</script>
</head>
<body>
    <h3> window.location으로 웹 사이트 접속</h3>
<hr>
사이트 선택 : 
<select id="site">
    <option value="http://www.naver.com" selected>네이버</option>
    <option value="http://www.google.com">구글</option>
<option value="http://www.microsoft.com">마이크로소프트</option>
</select>
<p></p>
<button onclick="load()">웹 사이트 접속</button>
</body>
</html>