반응형

자바스크립트 개발 환경 Microsoft Visual Studio 2015 버전 HTML 기능 및 Chrome을 이용하고 있습니다.





자바스크립트에서 Window Screen에 대해 파악하는 방법도 존재한다.


Screen이란 무얼 의미하냐면, 지금 자신이 보고 있는 PC, 노트북, 스마트폰, 테블릿 등등의 화면 크기를 말한다.



거두절미하고 바로 속성들에 대해 알아보자.


다양한 속성이 존재하는데 이번에는 6가지 속성에 대해 알아보려 한다.


이 6가지는 대표적으로 모든 브라우저에서 이용 가능한 속성이다.





스크린 = 모니터

screen.width :: 스크린의 전체 가로 길이를 구한다.

screen.height :: 스크린의 전체 세로 길이를 구한다.


screen.availWidth :: 스크린의 작업 표시줄 같은 것들을 제외한 가로 길이를 구한다.

screen.availHeight :: 스크린의 작업 표시줄 같은 것들을 제외한 세로 길이를 구한다.


screen.colorDepth :: 

screen.colorDepth 속성은 하나의 색을 표현하기위한 비트 수를 리턴해준다.


현대 컴퓨터들은 24비트 혹은 32비트로 컬러를 표현, 예전 컴퓨터는 16비트로, 아주 오래전 컴퓨터는 8비트로 표현한다.


24 bits =      16,777,216 different "True Colors"

32 bits = 4,294,967,296 different "Deep Colors"

16 bits = 65,536 different "High Colors" 

8 bits  = 256 different "VGA colors"


screen.pixelDepth :: 스크린의 pixel depth를 리턴해준다.(픽셀 표현을 위한 비트를 리턴)



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<body>
 
    <h1>JavaScript With Crocus</h1>
    <p>자신의 Screen(모니터) 정보를 알아보세요!</p>
 
    <button type="button" onclick="getInfo()"> <<클릭>> </button>
    <p id="test"></p>
 
    <script>
        function getInfo() {
 
            var w = screen.width;
            var h = screen.height;
 
            var aw = screen.width;
            var ah = screen.height;
 
            var cd = screen.colorDepth;
            var pd = screen.pixelDepth;
 
            document.getElementById("test").innerHTML =
                "가로 크기 :: " + w + "<br>" + "세로 크기 :: " + h + "<br>" +
                "가용 가로 크기 :: " + aw + "<br>" + "가용 세로 크기 :: " + ah + "<br>" +
                "colorDepth :: " + cd + "<br>" + "pixelDepth :: " + pd;
 
 
        }
     </script>
 
</body>
</html>
 
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus


















반응형

'Basic > JavaScript' 카테고리의 다른 글

자바스크립트 navigator  (0) 2017.09.28
자바스크립트 location  (0) 2017.09.28
자바스크립트 window  (0) 2017.09.28
자바스크립트 input 그리고 submit  (0) 2017.09.26
자바스크립트 use strict  (0) 2017.09.24