BOM   Browser Object Model   브라우저 객체 모델

(2019-02-08)

BOM 모델, BOM 객체, Window 객체

Top > [기술공통]
[기초과학]
[진동/파동]
[방송/멀티미디어/정보이론]
[전기전자공학]
[통신/네트워킹]
[정보기술(IT)]
[공업일반(기계,재료등)]
[표준/계측/품질]
[기술경영]
정보기술(IT) >   1. 정보기술
[전산기초]
[컴퓨터구조]
[프로그래밍]
[데이터베이스]
[소프트웨어 공학]
[운영체제]
[정보보호/보안]
[IT 기타기술]
프로그래밍 >   1. 프로그램,프로그래밍
[프로그래밍 언어론]
[구조적 프로그래밍]
[객체지향 프로그래밍]
[자료표현코드]
[자료구조]
[알고리즘]
[시스템 소프트웨어]
[프로그래밍언어 종류]
[프로그래밍 기타일반]
프로그래밍언어 종류 >   1. 프로그래밍 언어
[C]
[C++]
[자바(Java)]
[자바스크립트]
[PHP]
[파이썬]
[(기타 언어)]
자바스크립트 >   1. JavaScript
  2. JS 연산자
  3. 기초 문법
[JS 변수,타입]
[JS 함수]
[JS 객체]
[JS 배열]
[JS 활용]
[JS 웹문서 제어]
JS 웹문서 제어 >   1. 웹문서 내 JS
  2. 동일 출처 정책
[JS Window 객체]
[JS DOM 제어]
[JS 이벤트]
[Ajax]
[jQuery]
JS Window 객체   1. JS BOM
  2. JS BOM 활용

Top > [기술공통]
[기초과학]
[진동/파동]
[방송/멀티미디어/정보이론]
[전기전자공학]
[통신/네트워킹]
[정보기술(IT)]
[공업일반(기계,재료등)]
[표준/계측/품질]
[기술경영]
통신/네트워킹 >   1. 통신 이란?
  2. 신뢰적 통신
[통신이론]
[선로/전송]
[통신망 일반]
[회선교환(PSTN)]
[무선/이동통신]
[광통신]
[인터넷/데이터통신]
인터넷/데이터통신 >   1. 데이터통신망
  2. 인터넷
  3. 데이터 네트워크 설계
[데이터 단위]
[프로토콜/계층]
[데이터 링크]
[TCP/IP]
[라우팅]
[인터넷 QoS]
[인터넷 관리]
[인터넷 응용]
[인터넷 기타]
[패킷교환(PSN)]
[인터넷 관련 기관]
인터넷 응용 > [NetBIOS]
[DNS]
[가상단말]
[FTP]
[전자메일]
[VoIP]
[웹기술]
[VPN]
[무선인터넷]
[전자상거래]
[개인 컨텐츠]
[인터넷 기타 응용]
웹기술 >   1. 웹 이란?
  2. 하이퍼텍스트
[웹 구성]
[HTTP]
[웹 페이지]
[웹 식별]
[웹 서비스]
[차세대 웹]
[웹기술 기타일반]
웹 페이지 > [마크업 언어]
[DOM,BOM]
[기능 요소]
[웹 디자인]
DOM,BOM   1. DOM
  2. BOM

1. BOM (브라우저 객체 모델)웹 브라우저 기능 요소를 직접 관리/제어할 수 있는 특별한 객체 모음
     - 브라우저 제작사 마다 세부사항이 다소 다르게 구현

  ※ 특히, 자바스크립트는 이 객체 모음을 전역 객체(Global Object)로써 사용할 수 있음
     - `자바스크립트 Window 객체` 라고도 함


2. BOM 특징웹브라우저의 Window 객체를 대상으로 하는 객체 모델의 일종
     - 대부분의 웹 브라우저는 Netscape 3 를 거의 표준처럼 따름

  ㅇ 또다른 웹브라우저 객체 모델의 표준으로는, DOM(다큐먼트 객체 모델)이 있음


3. BOM 역할웹 브라우저의 버튼,URL 주소 입력 창,타이틀 바,윈도우 크기 등의 제어
     - 즉, 웹 브라우저 윈도우 및 웹 페이지의 일부분을 제어하게끔하는 윈도우용 객체 모델
4. Window 객체웹브라우저 창/ 마다 각기 최상위로 하나의 window 객체 가 있게 됨
     - 즉, 웹브라우저 화면(창,,프레임)을 참조할 수 있는 객체

  ㅇ window 객체는 '전역 객체(Global Object)' 임
     - 즉, 클라이언트 측에서 다룰 수 있는 최상위 객체/루트 객체/전역 객체 임
     - 한편, 이러한 전역 객체의 참조는,
        . 그 객체프로퍼티,메서드를 쓸때 그 객체의 이름을 앞에 굳이 명시할 필요 없음
        . 즉, window 객체메소드 호출 할 때 그냥 alert(),prompt() 만 쓰면 됨

  ㅇ 각 window 객체 간에는 서로 통신을 할 수도 있음


5. Window 객체의 주요 프로퍼터 및 메소드프로퍼티
     - 자신 또는 산하 객체를 가리킴
        . window 객체 자신
        . document 객체, location 객체, navigator 객체, 
          history 객체, event 객체 (☞ 이벤트 참조), console 객체,
          XMLHttpRequest 객체 등
        . 특정 창을 가리키는 객체 : self, parent, top, opener
     - 화면 높이,폭,위치
        . screenX, screenY, screenLeft, screenTop
        . innerHeight, innerWidth, outerHeight, outerWidth
     - 스크롤
        . scrollX, scrollY, pageXOffset, pageYOffset
     - 기타
        . frames[], closed, name, status

  ㅇ 메소드Window 객체의 메소드 참조 
     - 대화상자 : alert(), prompt(), confirm()
     - 창 열기/닫기 : close(), open() 
     - 포커스 주기/제거 : blur(), focus()
     - 타이머 : setTimeout(), setInterval(), clearTimeout(), clearInterval()
     - 창 이동/조정 : moveBy(), moveTo(), resizeBy(), resizeTo(), scrollBy(), scrollTo()
     - print()


6. Window 객체 내 포함된 주요 산하 객체

    

  ㅇ history 객체  : 이동 히스토리 관련 이력/목록 정보
     - 프로퍼티 : length, state, scrollRestoration
     - 메소드 : back(), forward(), go(수치),
                pushState(state,title,url), replaceState(state,title,url)

  ㅇ document 객체  : 창(window)에 표시되는 웹페이지(HTML 문서)의 관리
     - 프로퍼티 
        . 일반 : cookie, domain, location, readyState, referer, title, url, ...
        . DOM 관련 : body, form, image, link, html, ...
     - 메소드   : close(), open(), write(), writeln(), ...

  ㅇ location 객체  : 현재 문서의 URL 관련 정보
     - 프로퍼티 : hash, host, hostname, href, pathname, port, protocol, search, ...
        . 例)
           .. location.protocol => `http` 
           .. location.hostname => `www.ktword.co.kr`
           .. location.port     => `80` (default)
           .. location.pathname => `/test/index.php`
           .. location.href     => `http://www.ktword.co.kr/test/index.php?id=123`
           .. location.search   => ? 이후 질의부 (URL 인코딩웹서버에 질의 문자열을 보냄)
           .. location.pathname => # 이후 앵커부
     - 메소드   : assign(url), replace(url), reload()
       . assign(url) : URL에 있는 웹문서를 읽어들이며, 이력을 남김
       . replace(url) :URL에 있는 웹문서를 읽어들이나, 이력을 남기지 않음

  ㅇ navigator 객체 : 웹브라우저 제작사,버전정보,사용언어 등이 저장됨
     - 프로퍼티 : userAgent, geolocation, language, platform, ...
     - 메소드 : javaEnabled(), getUserMedia(), vibrate(), ...

  ㅇ screen 객체    : 컴퓨터 스크린 정보(현 디스플레이 크기,색상,방향 등)
     - 프로퍼티 
        . 사용가능화면 (작업표시줄 등 제외) : availTop, availLeft, availHeight, availWidth
        . colorDepth (색 깊이 비트 수), pixelDepth, height, weight, orientation, ...


[JS Window 객체] 1. JS BOM 2. JS BOM 활용
  1.   기술공통
  2.   기초과학
  3.   진동/파동
  4.   방송/멀티미디어/정보이론
  5.   전기전자공학
  6.   통신/네트워킹
  7.   정보기술(IT)
        1. 정보기술
    1.   전산기초
    2.   컴퓨터구조
    3.   프로그래밍
          1. 프로그램,프로그래밍
      1.   프로그래밍 언어론
      2.   구조적 프로그래밍
      3.   객체지향 프로그래밍
      4.   자료표현코드
      5.   자료구조
      6.   알고리즘
      7.   시스템 소프트웨어
      8.   프로그래밍언어 종류
            1. 프로그래밍 언어
        1.   C
        2.   C++
        3.   자바(Java)
        4.   자바스크립트
              1. JavaScript
              2. JS 연산자
              3. 기초 문법
          1.   JS 변수,타입
          2.   JS 함수
          3.   JS 객체
          4.   JS 배열
          5.   JS 활용
          6.   JS 웹문서 제어
                1. 웹문서 내 JS
                2. 동일 출처 정책
            1.   JS Window 객체
              1.   1. JS BOM
                  2. JS BOM 활용
            2.   JS DOM 제어
            3.   JS 이벤트
            4.   Ajax
            5.   jQuery
        5.   PHP
        6.   파이썬
        7.   (기타 언어)
      9.   프로그래밍 기타일반
    4.   데이터베이스
    5.   소프트웨어 공학
    6.   운영체제
    7.   정보보호/보안
    8.   IT 기타기술
  8.   공업일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

 
        최근수정     요약목록     참고문헌