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

(2019-02-08)

BOM 모델, BOM 객체, Window 객체

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

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 활용

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, ...


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

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