[JS강좌] 19강 BOM - screen - 오쌤의 니가스터디

728x90

** 영상으로 보실분은 아래 주소를 클릭해주세요.

* 객체의 큰 부분

종류	설명
기본내장객체	기본적인 객체들로 보통 컴퓨터 언어들은 갖고 있는 객체
BOM(Browser Object Model)	브라우저오브젝트 모델, 브라우저 관련 객체
DOM(Document Object Model)	문서객체모델, 태그나 컨텐츠 등을 의미하는 객체
사용자정의객체	개발자가 직접적으로 생성하는 새로운 객체

* BOM객체

종류	설명
window	브라우저 창 객체, BOM의 최상위 객체
location	주소표시줄 객체
screen	운영체제 화면 객체
history	방문기록 객체
navigator	브라우저정보 객체
document	문서객체 - body태그부분을 의미

- BOM은 전부 소문자로 쓰는 것이 규칙입니다.

- DOM은 BOM의 일부이나 매우 중요하기 때문에 따로 나눠서 봅니다.

1. screen 객체의 속성

- screen은 운영체제의 화면입니다.

1) screen 속성의 종류

- 모든 객체는 속성과 메서드를 갖고 있습니다.

- 물론 경우에 따라 속성만 갖고 있을수도, 메서드만 갖고 있을수도 있습니다.

- screen객체는 자바스크립트가 명령을 줄수는 없기 때문에 속성만 갖고 있습니다.

- 자바스크립트로 임의적으로 사용자 화면의 해상도를 건드리게 하면 안되기 때문입니다.

속성 종류	설명
availHeight	운영체제의 작업표시줄과 같은 인터페이스기능을 제외한 사용자 화면의 높이를 픽셀단위로 반환
availWidth	운영체제의 작업표시줄과 같은 인터페이스기능을 제외한 사용자 화면의 폭을 픽셀단위로 반환
colorDepth	이미지를 표시하기 위한 색상 팔레트의 비트심도(픽셀 당 비트수)를 반환
height	사용자의 화면의 총 높이를 픽셀단위로 반환
pixelDepth	방문자 화면의 색상 해상도(픽셀 당 비트)를 반환
width	사용자의 화면의 총 폭을 픽셀단위로 반환

## 전체 확인 코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS BOM - screen</title>
        <script>
            var ah = screen.availHeight;
            var aw = screen.availWidth;
            var h = screen.height;
            var w = screen.height;
            var c = screen.colorDepth;
            var p = screen.pixelDepth;

            document.write('사용가능높이 : ' + ah + '<br>');
            document.write('사용가능폭 : ' + aw + '<br>');
            document.write('전체높이 : ' + h + '<br>');
            document.write('전체폭 : ' + w + '<br>');
            document.write('이미지비트심도 : ' + c + '<br>');
            document.write('색상해상도 : ' + p + '<br>');
        </script>
    </head>
    <body>
        
    </body>
</html>

## 코드 결과

2) 새창 풀스크린 만들기

## 코드 예시

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS BOM - screen</title>
        <script>
            var newWindow = window.open('','','width=300,height=300');

            //3초 후에 풀스크린처리
            var w = screen.width;
            var h = screen.height;

            setTimeout(function(){
                newWindow.resizeTo(w,h);
            },3000);
        </script>
    </head>
    <body>
        
    </body>
</html>

## 코드 결과

- 새창은 팝업차단되므로 브라우저에서 팝업차단을 먼저 풉니다.

- 300x300짜리 창이 3초후 풀스크린으로 처리되는 것을 확인할 수 있습니다.

728x90

저작자표시 비영리 변경금지

'웹언어 > JAVASCRIPT' 카테고리의 다른 글

[JS강좌] 21강 DOM - 문서객체생성 - 오쌤의 니가스터디 (0)	2021.06.12
[JS강좌] 20강 DOM - 문서객체선택 - 오쌤의 니가스터디 (0)	2021.06.11
[JS강좌] 18강 BOM - 모바일기기접속 확인 - 오쌤의 니가스터디 (0)	2021.06.09
[JS강좌] 17강 BOM - navigator객체 - 오쌤의 니가스터디 (0)	2021.06.09
[JS강좌] 16강 BOM - history객체 - 오쌤의 니가스터디 (0)	2021.06.08