반응형

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






Browser Object Model(BOM)


Browser Object Model(BOM)에 대해 알아보고자 한다.


사실상 BOM에 대한 공식 표준은 존재하지 않는다. 


그리고 최신 브라우저는 자바스크립트와 동일한 메소드와 속성으로 구현했기에 BOM의 메소드와 속성도 동일취급받기도 한다.



 

Window Object


Window Object(흔히 인터넷 창이라고 부른다.)는 모든 브라우저에서 지원된다.


모든 전역 자바스크립트 오브젝트, 함수, 변수들은 자동적으로 window object에 속하게 된다.


전역 변수는 window object의 속성이고, 함수는 메소드라 할 수 있다.


즉, window.document.getElementById("header");와 document.getElementById("header");는 같다.





Window Size


두가지 속성을 이용하여 우리는 인터넷 창의 크기를 확인 할 수 있다.


window.innerHeight - 인터넷 창(윈도우 브라우저)의 내부 높이를 확인 할 수 있다.(픽셀 기준)

window.innerWidth - 인터넷 창(윈도우 브라우저)의 내부 너비를 확인 할 수 있다.(픽셀 기준)



이때 참고해야 할 점은 툴바, 스크롤바 같은 것들은 높이, 너비에 해당하지 않는다.



이때 Internet Explorer 8,7,6,5 버전에서는 위와 같이 사용 할 수 없고 다음과 같이 사용해야 한다.


document.documentElement.clientHeight

document.documentElement.clientWidth


또는


document.body.clientHeight

document.body.clientWidth



이러한 번거로움을 제거하기 위해 자바스크립트에서 코딩을 하면 다음과 같이 할 수 있다.


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
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<body>
 
    <h1>JavaScript With Crocus</h1>
    <p>크기를 자유롭게 조절하고 난 뒤 버튼을 클릭해보세요!</p>
 
    <p id="test"></p>
    <button type="button" onclick="chkLen2()"> <<클릭>> </button>
    <p id="test2"></p>
 
    <script>
        setInterval(chkLen, 100);
        function chkLen() {
 
            var w = window.innerWidth
                || document.documentElement.clientWidth
                || document.body.clientWidth;
            var h = window.innerHeight
                || document.documentElement.clientHeight
                || document.body.clientHeight;
 
            document.getElementById("test").innerHTML =
                "가로 크기 :: " + w + " 세로 크기 :: " + h;
 
        }
 
        function chkLen2() {
 
            var w = window.innerWidth
                || document.documentElement.clientWidth
                || document.body.clientWidth;
            var h = window.innerHeight
                || document.documentElement.clientHeight
                || document.body.clientHeight;
 
            document.getElementById("test2").innerHTML =
                "가로 크기 :: " + w + " 세로 크기 :: " + h;
 
        }
     </script>
 
</body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus


클릭하시면 결과 화면을 확인 할 수 있습니다.



추가적으로 아래 대표적인 몇가지 메소드들이 더 있는데, 검색을 통해 한번 공부해보는 것을 추천한다.


  • window.open() - open a new window
  • window.close() - close the current window
  • window.moveTo() -move the current window
  • window.resizeTo() -resize the current window





















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

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

자바스크립트 location  (0) 2017.09.28
자바스크립트 screen  (0) 2017.09.28
자바스크립트 input 그리고 submit  (0) 2017.09.26
자바스크립트 use strict  (0) 2017.09.24
addEventListener() 메서드  (0) 2017.09.24

티스토리툴바