TIL 9. JS - 객체모델, Window와 BOM

문승준·2021년 8월 23일
1

JavaScript

목록 보기
5/8
post-thumbnail

브라우저와 객체모델

  • 브라우저의 구성요소들은 하나하나가 객체이다. 브라우저는 각각의 html 태그들을 객체화시켜둔다.

  • JS로 이 객체를 제어하면 브라우저를 제어할 수 있다. ex) 메서드 사용, 프로퍼티 값 가져오기 등


  • 브라우저가 만들어둔 객체들은 서로 계층적인 관계로 구조화 되어 있다.

    Window

    DOM (Document Object Model)

    BOM (Browser Object Model)

    JS core


  • Window : 전역객체, 브라우저 창을 제어한다.

    window 객체의 document 프로퍼티 중에는 document 객체가 있다.

    window.document로 접근할 수 있으며 전역객체이므로 window는 생략가능하다

    document 객체는 html의 태그들을 제어할 수 있다.


  • DOM : 웹페이지의 내용을 제어한다.

    document 객체의 프로퍼티를 사용해 문서의 엘리먼트에 접근할 수 있다.

    특정 엘리먼트의 객체를 얻을 수 있는 메서드도 제공한다.


  • BOM : 내용을 제외한 현재 웹브라우저의 각종 요소들을 객체화 시킨 것

    window 객체의 프로퍼티이며 아래의 다양한 객체를 가지고 있다.

    navigator, screen, location, frames, history, XMLHttpRequest

    ex) url 가져오기, reload, alert, confirm 등


  • JavaScript core : 객체, 배열, 함수 등의 객체가 있다.

    브라우저, 구글앱스스크립트, 노드js 등 제어할 수 있다.

    브라우저가 아닌 것까지 제어 할 수 있다.


  • 객체를 제어하는 방법 (DOM 예시)

    브라우저가 준비해둔 객체에는 DOM 이라는 것이 있다.

    DOM에는 getElementsByTagName 이라는 메서드가 있다.

    document.getElementsByTagName(인자);

    이 메서드의 인자로 태그를 넣으면 해당하는 모든 요소들을 리턴해준다.

    여러개의 값을 리턴하니까 배열타입 → 인덱스를 활용해 요소를 가져올 수 있다.

    가져온 요소는 객체이다. → 객체.style.width = '50px';

  • 윈도우 창과 관련된 Window 객체도 있다.

    window.alert('Hello world'); → 경고창을 띄울 수 있다.

결국 JS로 브라우저를 제어하려면 위에 있는 객체들을 활용할 수 있어야 한다.


BOM과 Window 객체

  • 브라우저의 창이나 프레임을 추상화해서 제어한다.
  • 전역객체 Window의 프로퍼티와 메서드들을 이용해 제어한다.

Window 객체

  • 모든 객체가 소속된 객체, 전역객체, 창이나 프레임

  • 전역변수를 생성하고 함수를 선언하는 것 → window 객체의 프로퍼티와 함수를 만드는 것

    (ECMAScipt에서 Global 객체라고 부른다.)

사용자와 커뮤니케이션

  • alert() : 경고창

    사용자에게 정보를 제공하거나 디버깅 등의 용도

    실행 중에는 다른 동작들이 일시중지된다.

  • confirm() : 확인창

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

    사용자의 피드백에 따라 실행을 달리 할 수 있다.

  • prompt() : 입력창

    사용자의 입력을 받아서 리턴해준다.

location 객체

  • 현재 열려있는 문서의 URL을 알아낸다.

  • location만 출력하면 해당 객체의 다양한 정보가 나온다.

  • 다양한 프로퍼티를 이용해 특정 정보를 가져올 수 있다.

    ( href, protocol, host, port, pathname, search, hash 등 )

alert(location);

//alert의 입력값이 문자열이어야 하기 때문에 주소만 나온다.


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

// 콘솔에 입력하면 같은 주소가 2번 출력된다.
// href 프로퍼티에 접근하면 현재 url 주소를 가져올 수 있다.
  • URL 변경하기
// 입력한 url로 이동시키는 2가지 방법 (re-direction)

location.href = 'http://다른사이트.net';

location = 'http://다른사이트.net';


// 현재 문서를 리로드

location.reload()
  • 브라우저의 정보를 제공하는 객체.

  • 크로스 브라우징 - 주로 호환성 문제 등을 위해 사용한다.

  • appName, appVersion, userAgent, platform 등의 프로퍼티가 있다.

// 모든 프로퍼티 열람
console.dir(navigator);

// 브라우저의 이름
console.dir(navigator.appName);

// 브라우저의 버전
console.dir(navigator.appVersion);

// 브라우저가 서버에 전달하는 정보
console.dir(navigator.userAgent);

// 브라우저가 동작하는 운영체제 정보
console.dir(navigator.platform);

→ 모든 브라우저에 대응하는 것은 한계가 있다.

기능 테스트

  • Object.keys

    → Object라는 객체가 keys라는 메소드를 가지고 있지 않을 때 실행하는 코드

    → 브라우저에 해당 메소드가 내장되어 있지 않을 때 기능을 추가하는 것

// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
if (!Object.keys) {
  Object.keys = (function () {
   //코드생략//
  }());
}

창 제어

  • window.open() 메소드는 새 창을 생성한다.

    • 첫번째 인자는 새 창의 URL

    • 두번째 인자는 새 창의 이름 (_self, _blank, 임의 지정)

      → 동일한 이름의 창이 있으면 그곳으로 문서가 로드된다.

    • 세번째 인자는 새 창의 style (ex 'width=200' )

  • 새 창에 접근하여 상호작용 (같은 도메인 일때)

<!-- 새창열기 버튼, 입력칸 , 새창닫기 버튼 -->
<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', 'ot', 'width=300px, height=500px');
    }
// 클릭해서 새로 연 창 demo2를 전역객체 win에 할당
      
    function winmessage(msg){
        win.document.getElementById('message').innerText=msg;
    }
// 입력한 텍스트 value값을 새 창의 message에 할당
      
    function winclose(){
        win.close();
    }
// 클릭해서 새로 연 창을 닫기
      
    </script>
</body>
</html>
  • 팝업 차단.
    • 다른 도메인에 접근이 가능하면 보안 문제가 발생할 수 있다.
// 팝업 제한에 걸리는 코딩

window.open('demo2.html');

// 사용자의 인터렉션이 있으면 팝업 제한에 걸리지 않는다.
profile
개발자가 될 팔자

0개의 댓글