본문 바로가기
Front-End

BOM (Browser Object Model) 완벽 정복하기

realhee 2022. 2. 9. 14:26
반응형

 

 

BOM이란?

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

 

대부분의 브라우저에서 구현은 되어있지만, 정의된 표준이 없어 브라우저 제작사 마다 세부사항이 다르고 다소 한정적이라는 특징이 있다.

 

BOM의 역할은 웹 브라우저의 버튼, URL 주소 입력 창, 타이틀 바 등 웹브라우저 윈도우 및 웹페이지의 일부분을 제어할수 있게끔 하는 것이다.

 

BOM을 이해하기 위해서는 Window 객체의 프로퍼티와 메소드의 사용법을 배우는 것이라고 해도 과언이 아닐 것이다. 

BOM의 공부와 동시에 Window 객체의 사용법을 알아야 한다.

 

대표적인 BOM 객체

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

  • 1) window: Global Context. 브라우저 창 객체
  • 2) screen: 사용자 환경의 디스플레이 정보 객체
  • 3) location: 현재 페이지의 url을 다루는 객체
  • 4) navigator: 웹브라우저 및 브라우저 환경 정보 객체
  • 5) history: 현재의 브라우저가 접근했던 URL history

 

전역객체

Window 객체는 식별자 window를 통해서 얻을 수 있다. 또한 생략 가능하다. Window 객체의 메소드인 alert을 호출하는 방법은 아래와 같다.

 

<!DOCTYPE html>
<html>
<script>
    alert('Hello world');
    window.alert('Hello world');
</script>
<body>
 
</body>
</html>

 

아래는 전역변수 a에 접근하는 방법이다.  

<!DOCTYPE html>
<html>
<script>
    var a = 1;
    alert(a);
    alert(window.a);
</script>
<body>
 
</body>
</html>

 

객체를 만든다는 것은 결국 window 객체의 프로퍼티를 만드는 것과 같다.

<!DOCTYPE html>
<html>
<script>
    var a = {id:1};
    alert(a.id);
    alert(window.a.id);
</script>
<body>
 
</body>
</html>

 

객체를 만든다는 것은 결국 window 객체의 프로퍼티를 만드는 것과 같다.

 

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

 

 

 

 

 

BOM을 사용하는 이유?

  1. 유저에게 경고창을 띄우고 싶을 때 - "alert"
  2. 유저의 yes or no 선택 값에 따른 응답을 보여주고 싶을 때 - "confirm"
  3. 유저가 브라우저 창을 닫기 전에 정말 떠날 것인지 확인하고 싶을 때 - "beforeunload"
  4. 유저가 접속한 환경을 알고 싶을 때 - "location"
  5. 현재 url 위치 및 접속 history를 알고 싶을 때 - "history"
  6. 사용자가 입력한 값을 가져오고 싶을 때 - "prompt"

자바스크립트를 통해 구현할 수도 있지만 브라우저의 기본 API를 사용한다면 훨씬 간단하게 프로토타이핑이 가능하다.

 

 

 

사용자와 커뮤니케이션하기

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

 

alert

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

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

 

confirm

확인을 누르면 true, 취소를 누르면 false를 리턴한다.

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

 

beforeunload

페이지를 벗어날 때 확인 메세지를 표시할 수 있다. 단, 크롬에서는 경고창에 문구가 나타나진 않는다.

window.onbeforeunload = function() {
    return '작성 중인 메시지가 있습니다.'
}

 

prompt

사용자의 입력값을 받아 전송할 때 사용한다.

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

 

location

현재 윈도우의 문서가 위치하는 URL을 알아내는 방법이다.

console.log(location.toString(), location.href);
// location 객체는 URL을 의미에 따라서 별도의 프로퍼티로 제공하고 있다. (URL Parshing)
console.log(location.protocol, location.host, location.port, location.pathname, location.search, location.hash)



// 현재 문서를 해당 URL로 이동한다.
location.href = 'http://egoing.net';

// 아래와 같은 방법도 같은 효과를 낸다.
location = 'http://egoing.net';

//현재 문서를 리로드한다.
location.reload();

 

Navigator

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

아래 명령을 통해 이 객체의 모든 프로퍼티를 열람할 수 있다.

 

console.dir(navigator);

Navigator 객체는 브라우저 호환성을 위해서 주로 사용하지만 모든 브라우저에 대응하는 것은 쉬운 일이 아니므로 별도의 기능 테스트가 선호된다.

 

window.open

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

 

<!DOCTYPE html>
<html>
<style>li {padding:10px; list-style: none}</style>
<body>
<ul>
    <li>
        첫번째 인자는 새 창에 로드할 문서의 URL이다. 인자를 생략하면 이름이 붙지 않은 새 창이 만들어진다.<br />
        <input type="button" onclick="open1()" value="window.open('demo2.html');" />
    </li>
    <li>
        두번째 인자는 새 창의 이름이다. _self는 스크립트가 실행되는 창을 의미한다.<br />
        <input type="button" onclick="open2()" value="window.open('demo2.html', '_self');" />
    </li>
    <li>
        _blank는 새 창을 의미한다. <br />
        <input type="button" onclick="open3()" value="window.open('demo2.html', '_blank');" />
    </li>
    <li>
        창에 이름을 붙일 수 있다. open을 재실행 했을 때 동일한 이름의 창이 있다면 그곳으로 문서가 로드된다.<br />
        <input type="button" onclick="open4()" value="window.open('demo2.html', 'ot');" />
    </li>
    <li>
        세번재 인자는 새 창의 모양과 관련된 속성이 온다.<br />
        <input type="button" onclick="open5()" value="window.open('demo2.html', '_blank', 'width=200, height=200, resizable=yes');" />
    </li>
</ul>
 
<script>
function open1(){
    window.open('demo2.html');
}
function open2(){
    window.open('demo2.html', '_self');
}
function open3(){
    window.open('demo2.html', '_blank');
}
function open4(){
    window.open('demo2.html', 'ot');
}
function open5(){
    window.open('demo2.html', '_blank', 'width=200, height=200, resizable=no');
}
</script>
</body>
</html>

 

 

 

참고링크

 opentutorials

 

 

반응형
저작자표시

'Front-End' 카테고리의 다른 글

이벤트(Event) 흐름 제어하는 법  (0) 2022.02.11
프론트 엔드의 상태(state) 관리  (1) 2022.02.10
DOM (Document object Model) 완벽 정복하기  (0) 2022.02.08
SaaS (Software as a service)  (0) 2020.03.12
SEO (Search Engine Optimization)  (0) 2020.03.11

'Front-End' Related Articles

티스토리툴바

티스토리툴바