Archive

JS Day 14 BOM API

|

JS Day 14 BOM API


  1. BOM API

    • BOM(Browser Object Model) : 브라우저 객체 모델, 문서 이외의 모든 것을 제어하기 위해 브라우저가 제공하는 추가 객체
    • window 객체
    • 브라우저 창을 제어할 수 있는 메서드 제공 DOM, BOM의 루트 객체

    window

    • ex) window.location => location // window는 최상단 객체이므로 생략이 가능하다.

      • window 객체 기본 메소드

        • moveBy(x, y) : 윈도우의 위치를 상대적으로 이동

        • moveTo(x, y) : 윈도우의 위치를 절대적으로 이동

        • resizeBy(x, y) : 윈도우의 크기를 상대적으로 지정

        • resizeTo(x, y) : 윈도우의 크기를 절대적으로 지정

        • scrollBy(x, y) : 윈도우 스크롤의 위치를 상대적으로 이동

        • scrollTo(x, y) : 윈도우 스크롤의 위치를 절대적으로 이동

        • focus() : 윈도우에 초점 맞춤

        • blur() : 윈도우에 맞춘 초점 제거

        • close() : 윈도우 닫음

        • open(url, name, spec, replace) : 새 창을 염

        • setTimeout(callback, time) : time 후 callback 실행

        • clearTimeout(변수명) : setTimeout을 제거

        • setInterval(callback, time) : time 간격으로 callback 실행

        • clearInterval(변수명) : setInterval을 제거

        • alert() : 경고창

        • confirm() : 확인/취소창

        • prompt() : 입력 받는 창

    • navigator 객체 : 브라우저에 대한 정보

      • navigator 객체 속성

        • appCodeName : 브라우저의 코드 이름

        • appName : 브라우저의 이름

        • appVersion : 브라우저의 버전

        • platform : 사용 중인 운영체제의 시스템 환경

        • userAgent : 웹 브라우저 전체 정보

    • screen 객체 : 브라우저가 아닌 사용자 화면

      • screen 객체 속성

        • width : 화면의 너비

        • height : 화면의 높이

        • availWidth : 실제 화면에서 사용 가능한 너비

        • availHeight : 실제 화면에서 사용 가능한 높이

        • colorDepth : 사용 가능한 색상 수

        • pixelDepth : 한 픽셀당 비트 수

    • history 객체 : 브라우저의 세션 기록에 접근

      • history 객체 기본 메소드

        • back() : 뒤로가기

        • forward() : 앞으로 가기

        • go() : 현재 페이지 기준으로 이동 (1 : 앞, -1 : 뒤, 0 : 리로딩)

    • location 객체

      • location 객체 속성

        • href : 새로운 페이지로 이동 ex) location.href = url;

        • host : 호스트 이름과 포트번호 // localhost:8080

        • hostname : 호스트 이름 // localhost

        • port : 포트 번호 // 30763

        • pathname : 디렉토리 경로 // /a/index.html

        • hash : 앵커 이름(#~) // #beta

        • search : 요청 매개변수 // ?param=10

        • protocol : 프로토콜 종류 // http:

      • location 객체 메소드

        • assign(link) : 현재 위치를 이동

        • reload() : 새로고침

        • replace(url) : 기존 페이지를 url로 이동(뒤로가기 사용 불가, history 기록 x)



참고 자료


JAVASCRIPT.INFO

브라우저 객체 모델(BOM)

DON, BOM