본문 바로가기
프로그래밍 개발/JS 웹

javascript BOM

by Jinseok Kim 2020. 11. 17.
반응형

 

BOM이란?

 

 

BOM(Browser Object Model)이란 웹브라우저의 창이나 프래임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단이다. BOM은 전역객체인 Window의 프로퍼티와 메소드들을 통해서 제어할 수 있다.

 

 

 

 

 

 

 

전역개체 Window

 

 

 

 

 

 

Window 객체

 

Window 객체는 모든 객체가 소속된 객체이고, 전역객체이면서, 창이나 프레임을 의미한다. 

 

 

 

 

 

 

 

 

전역객체

 

Window 객체는 식별자 window를 통해서 얻을 수 있다. 또한 생략 가능하다. 

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <script>
    document.write('jin seok'+'</br>');
    window.document.write('jin seok');
</script>
</body>
</html>

  • 위의 코드와 결과를 보면 전역변수와 함수가 사실은 window 객체의 프로퍼티와 메소드라는 것이다. 또한 모든 객체는 사실 window의 자식이라는 것도 알 수 있다.
  • 이러한 특성을 ECMAScript에서는 Global 객체라고 부른다.
  • ECMAScript의 Global 객체는 호스트 환경에 따라서 이름이 다르고 하는 역할이 조금씩 다르다. 웹브라우저 자바스크립트에서 Window 객체는 ECMAScript의 전역객체이면서 동시에 웹브라우저의 창이나 프레임을 제어하는 역할을 한다.

 

 

 

 

 

 

 

 

사용자와의 커뮤니케이션

 

 

 

HTML은 form을 통해서 사용자와 커뮤니케이션할 수 있는 기능을 제공한다. 자바스크립트에는 사용자와 정보를 주고 받을 수 있는 간편한 수단을 제공한다. 

 

 

 

 

 

 

 

alert

 

경고창이라고 부른다. 사용자에게 정보를 제공하거나 디버깅등의 용도로 많이 사용한다.

 

<!DOCTYPE html>
<html>
    <body>
        <input type="button" value="alert" onclick="alert('jin seok');" />
    </body>
</html>

 

 

 

 

 

 

confirm

 

확인을 누르는 버튼과 취소를 누르는 버튼이 등장하며 확인 버튼은 true, 취소 버튼 false를 리턴한다.

 

 

 

<!DOCTYPE html>
<html>
    <body>
        <input type="button" value="confirm" onclick="func_confirm()" />
        <script>
            function func_confirm(){
                if(confirm('Are you jin seok?')){
                    alert('ok');
                } else {
                    alert('cancel');
                }
            }
        </script>
    </body>
</html>

 

 

 

 

 

 

 

prompt

 

정보 값을 입력할 수 있는 칸이 등장하게 한다. 확인을 누르면 입력한 정보 값을 자바스크립트가 받아서 처리할 수 있게 한다.

 

<!DOCTYPE html>
<html>
    <body>
        <input type="button" value="prompt" onclick="func_prompt()" />
        <script>
            function func_prompt(){
                if(prompt('id?') === 'jin seok'){
                    alert('welcome');
                } else {
                    alert('fail');
                }
            }
        </script>
    </body>
</html>

 

 

 

 

 

 

 

 

 

 

Location 객체

 

 

Location 객체는 문서의 주소와 관련된 객체로 Window 객체의 프로퍼티다. 이 객체를 이용해서 윈도우의 문서 URL을 변경할 수 있고, 문서의 위치와 관련해서 다양한 정보를 얻을 수 있다.

 

 

 

 

 

 

 

현재 윈도우의 URL 알아내기

 

 

console.log(location.toString(), location.href);

 

 

위의 코드를 이용하여 현재 윈도우의 문서가 위치하는 URL을 알아내는 것을 확인 할 수 있다.

 

 

 

 

 

 

URL Parsing

 

console.log(location.protocol, location.host, location.port, location.pathname, location.search, location.hash)

 

 

location 객체는 URL을 의미에 따라서 별도의 프로퍼티로 제공하고 있다. 

 

 

 

 

 

 

 

 

 

URL 변경하기

 

 

location.href = 'http://k0502s.net';

위 코드는 현재 문서를 http://k0502s.net 으로 이동하게 한다. 

 

 

 

 

location = 'http://k0502s.net';

위 코드 또한  http://k0502s.net 으로 이동하게 한다. 

 

 

 

 

location.reload();

 

위 코드는 현재 문서를 리로드(새로고침)하는 간편한 방법을 제공한다.

 

 

 

 

 

 

 

 

Navigator 객체

 

 

브라우저의 정보를 제공하는 객체다. 주로 호환성 문제등을 위해서 사용한다.

 

 

console.dir(navigator);

위 코드의 명령을 통해서 이 객체의 모든 프로퍼티를 열람할 수 있다.

 

 

 

 

appName

 

웹브라우저의 이름이다. IE는 Microsoft Internet Explorer, 파이어폭스, 크롬등은 Nescape로 표시한다.

 

내가 사용한 브라우저는 크롬이기에 Nescape가 도출된다.

 

 

 

 

 

 

appVersion

 

브라우저의 버전을 의미한다. 

 

내가 사용하고 있는 브라우저의 버전 정보를 확인 할 수있다.

 

 

 

userAgent

 

브라우저가 서버측으로 전송하는 USER-AGENT HTTP 헤더의 내용이다. appVersion과 비슷하다.

 

내가 사용하고 있는 브라우저 서버측으로 전송하는 USER-AGENT HTTP 헤더의 내용을 확 인 할 수 있다.

 

 

 

 

 

platform

 

브라우저가 동작하고 있는 운영체제에 대한 정보다

 

 

내가 사용하고 있는 운영체제가 윈도우라는 것을 확인 할 수 있다.

 

 

 

 

 

기능 테스트

 

Navigator 객체는 브라우저 호환성을 위해서 주로 사용하지만 모든 브라우저에 대응하는 것은 쉬운 일이 아니므로 코드를 사용하여 기능을 테스트한다.

 

예를 들어 Object.keys라는 메소드는 객체의 key 값을 배열로 리턴하는 Object의 메소드다. 이 메소드는 최신 버전에 추가되었기 때문에 오래된 자바스크립트와는 호환되지 않는다.

 

아래 코드를 이용하면 호환성을 맞출 수 있다.

↓

// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
if (!Object.keys) {
  Object.keys = (function () {
    'use strict';
    var hasOwnProperty = Object.prototype.hasOwnProperty,
        hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'),
        dontEnums = [
          'toString',
          'toLocaleString',
          'valueOf',
          'hasOwnProperty',
          'isPrototypeOf',
          'propertyIsEnumerable',
          'constructor'
        ],
        dontEnumsLength = dontEnums.length;
 
    return function (obj) {
      if (typeof obj !== 'object' && (typeof obj !== 'function' || obj === null)) {
        throw new TypeError('Object.keys called on non-object');
      }
 
      var result = [], prop, i;
 
      for (prop in obj) {
        if (hasOwnProperty.call(obj, prop)) {
          result.push(prop);
        }
      }
 
      if (hasDontEnumBug) {
        for (i = 0; i < dontEnumsLength; i++) {
          if (hasOwnProperty.call(obj, dontEnums[i])) {
            result.push(dontEnums[i]);
          }
        }
      }
      return result;
    };
  }());
}

 

 

 

 

 

 

 

창 제어

 

 

 

 

 

창 생성

 

 

window.open 메소드는 새 창을 생성한다. 현대의 브라우저는 대부분 탭을 지원하기 때문에 window.open은 새 창을 만든다.

 

 

 

 window.open('js1.html');

위 코드는 새 창에 로드할 문서의 URL이다. 인자를 생략하면 이름이 붙지 않은 새 창이 만들어진다.

 

 

 

 

window.open('js1.html', '_self');

위 코드의 _self는 새로운 창을 스크립트가 실행되는 창에서 불러들리는 것으로 의미한다.

 

 

 

 

window.open('js1.html', '_blank');

_blank는 새 창을 의미한다.

 

 

 

 

window.open('js1.html', 'jin seok')

창에 이름을 붙일 수 있다. open을 재실행 했을 때 동일한 이름의 창이 있다면 그곳으로 문서가 로드된다.

 

 

 

 

 window.open('js1.html', '_blank', 'width=200, height=200, resizable=no');

위의 코드 중 세번재 인자는 새 창의 모양과 관련된 속성이 온다.

 

 

 

 

 

 

 

팝업 차단

 

사용자의 인터렉션이 없이 창을 열려고 하면 팝업이 차단된다. 

 

 

<!DOCTYPE html>
<html>
<body>
    <script>
    window.open('jin seok.html');
    </script>
</body>
</html>

 

 

 

 

 

 

 

 

 

새 창의 접근

 

<!DOCTYPE html>
<html>
<body>
    <input type="button" value="open" onclick="winopen();" />
    <input type="text" onkeypress="winmessage(this.value)" />
    <input type="button" value="close" onclick="winclose()" />
    <script>
    function winopen(){
        win = window.open('demo2.html', 'jin seok', 'width=300px, height=500px');
    }
    function winmessage(msg){
        win.document.getElementById('message').innerText=msg;
    }
    function winclose(){
        win.close();
    }
    </script>
</body>
</html>

 

  • 위의 코드는 정보를 입력하는 칸에 값을 입력하면 다른 새로운 창인 demo2라는 문서의 값이 동시에 변화게 하여 상호작용하게 하는 명령어 코드들이다.
  • open의 버튼을 누르면 자바스크립트의 함수 winopen()이 발동되어 메소드 open 안의 명령인 jin seok이라는 이름의 새로운 창인 demo2을 열게한다. 그리고 win이라는 전역변수에 담는다.
  • html에서 onkeypress을 이용하여 입력 칸에 값을 입력할 때마다 winmessage(this.value)는 자바스크립트에서 winmessage(msg)의 함수를 발동시킨다.
  • 함수 winmessage(msg)의 인수msg이라는 입력값은 innerText=msg;의 msg값으로 들어간다. 그리고 demo2 새창에 대한 정보를 담았던 객체인 win에서 getElementById('message')라는 메소드를 이용하여 demo2 창의 'message'라는 id값의 엘리먼트를 얻어 낼 수 있다. 이때 칸에 입력한 값에 따라 변화된 값이 입력된 msg의 입력값이 들어간  innerText=msg;을 이용하여 win의 demo2의 텍스트값을 변화시킨 것이다.

 

 

 

 

 

 

반응형

'프로그래밍 개발 > JS 웹' 카테고리의 다른 글

javascript Element 객체 - 식별자 API  (0) 2020.11.19
javascript Element 객체  (0) 2020.11.19
Javascript DOM - HTMLElement  (0) 2020.11.17
javascript DOM - jQuery  (0) 2020.11.17
javascript DOM - 제어 대상을 찾기  (0) 2020.11.17

관련글

댓글

티스토리툴바