[JS] BOM(Browser Object Model)

BOM

(Browser Object Model, 브라우저 객체 모델)

: 문서 이외의 모든 것을 제어하기 위해 브라우저(호스트 환경)가 제공하는 추가 객체

• 웹 브라우저를 조작하고 제어할 수 있게 해주는 객체들이 모여 있는 집합체

 

 

 

📌 Window 객체 

• 브라우저 창

alert, confirm, prompt, setTimeout, setInterval

 

 

 

 

📌 Location 객체 

• 현재 페이지의 URL

href, protocol, host, port, search, hash, replace, reload

// http://localhost:5500/index.html?type=listing&page=2#title

const { href, protocol, host, port, search, hash, replace, reload } = location;

console.log(href); // 주소 (http://localhost:5500/index.html?type=listing&page=2#title)
console.log(protocol); // 통신 규약 (http:)
console.log(host); // 호스트(localhost:5500) 
console.log(port); // 포트 (5500)
console.log(search); // 쿼리문을 가져올 때 사용 (?type=listing&page=2)
console.log(hash); // 북마크 같은 개념 (#title)

 

 

 

 

📌 Navigator 객체

• 브라우저의 정보(브라우저 이름, 버전, 운영체제 등)

platform, userAgent, language, onLine, geolocation

const { platform, userAgent, language, onLine, geolocation } = navigator;

console.log(navigator); // Navigator 객체
console.log(navigator.platform); // Win32

 

 

geolocation.getCurrentPosition
: 위치 정보를 객체로 받아오기

- 위치를 전달 받을 콜백 함수를 전달해야 함

 

navigator.geolocation.getCurrentPosition((data) => {
  console.log(data);
})

geolocation.getCurrentPosition

• latitude와 longitude로 현재 접속 위치를 알 수 있다.

 

예시

• 콜백 함수는 안쪽 데이터에 접근해서 밖에서 / 나중에 실행할 수 있도록 함
  - 코드는 비동기로 동작함 ➡ 변수에 값이 할당되지 않음 ➡ 변수 geo를 return할 수 없음 👉 콜백 함수(success)로 해결 

function getGeo(success) {
  navigator.geolocation.getCurrentPosition((data) => {

    if (data) {
      const { latitude, longitude } = data.coords;

      const geo = {
        lat: latitude,
        long: longitude
      }

      success(geo)

    } else {
      console.error('위치 서비스 동의하세요');
    }
  })
}

getGeo((data) => {
  console.log(data); // {lat: 39.9983488, long: 121.1037952} 
})

 

 

 

 

📌 Screen 객체

• 사용자의 화면(디스플레이)에 대한 정보

width, height, availWidth, availHeight, orientation

window.innerWidth; // 284
window.innerHeight; // 730

 

 

 

 

📌 History 객체

• 브라우저의 세션 히스토리를 관리
• 이전 페이지로 이동하거나 앞으로 이동

back, forward, go, length, pushState, replaceState

history.back(); // 이전 페이지로 이동해요.
history.forward(); // 다음 페이지로 이동해요.

<button onclick="history.back()">이전 페이지로 이동</button>
<button onclick="history.forward()">다음 페이지로 이동</button>
<button onclick="history.go(-1)">이전 페이지로 이동 (go)</button>
<button onclick="history.go(1)">다음 페이지로 이동 (go)</button>

 

 

---

 

브라우저 환경과 다양한 명세서

 

JavaScript Browser Object Model (BOM)