Javascript

[JS] BOM, window 객체 사용하기 ♦︎

Yujzu 2024. 8. 2. 18:17

 

# BOM (Browser Object Model)

: 브라우저와 관련된 객체를 다루는 모델

- 브라우저와 관련된 다양한 기능들을 제어할 수 있도록 돕는 API 제공

 

[ 특징 ]

- 브라우저와의 상호작용을 위해 사용한다.

- 브라우저 자체에 대한 제어를 담당

- window 객체는 BOM의 핵심으로, 브라우저의 상위 객체로서 다양한 기능을 제공한다.

 

# Window 객체

: 웹 브라우저에서 제공하는 전역 객체(global object)

- 브라우저 환경에서 자바스크립트를 실행할 때 자동으로 생성되며, 브라우저의 전체 창을 나타낸다.

- 웹 브라우저에서 실행되는 자바스크립트의 "최상위 객체"

- 브라우저와 페이지 사이의 인터페이스 역할을 한다.

- 모든 전역 객체와 메서드는 window 객체의 하위에 포함된다.

 

[ 주요 기능 ]

1. 브라우저 창 제어

window.open() // 새 창 또는 탭을 엽니다.
window.close() // 현재 창을 닫습니다.
window.scrollTo(x, y) // 특정 위치로 스크롤 이동.
window.resizeTo(width, height) // 창 크기를 조정.

 

2. DOM 과의 상호작용

- window.document를 통해 HTML 문서의 요소(DOM 트리)를 조작할 수 있다.

document.getElementById(), document.querySelector() // 특정 요소 선택
document.createElement() // 새로운 요소 생성

 

3. 브라우저 정보 제공

- 사용자가 사용하는 브라우저의 환경과 관련된 정보를 제공한다.

window.navigator // 브라우저의 정보와 사용자 환경을 제공합니다.
window.location // 현재 페이지의 URL 정보와 이동을 제어합니다.
window.screen // 디스플레이 화면의 정보(크기, 해상도 등)를 제공합니다.
window.history // 사용자가 방문했던 페이지 기록을 관리합니다.

 

4. 사용자와 상호작용

- 대화 상자와 이벤트 처리를 제공한다.

window.alert() // 경고 대화 상자를 표시
window.confirm() // 확인 대화 상자를 표시
window.prompt() // 입력 대화 상자를 표시
window.addEventListener() // 전역 이벤트를 감지 (예: 스크롤, 창 크기 변경)

- window.alert()와 alert()는 동일한 동작을 한다.

 

 

[ 실제 사용해본 코드 ]

 

# window.opener

: 현재 창을 새로운 브라우저 창이나 팝업 창으로 열었을 때, 그 팝업 창에서 부모 창을 참조할 수 있도록 해주는 속성

- 팝업 창에서 부모 창의 객체나 함수를 호출할 수 있게 해준다.

- window.open() 메서드를 통해 열린 창에서 window.opener를 사용하면 부모 창에 있는 JavaScript 객체 및 DOM 요소에 접근할 수 있다.

 

사용 예시)

// 부모 탭
const onClickbutton = ()=>{
  window.listData = listData;
  openPopUp('~~url'); // window.open()
}

// 새로 열린 창
const listData= window.opener?.listData; // listData를 꺼내서 사용

 

- window.opener는 악의적인 웹사이트에서 악용될 수 있으므로, noopener 또는 noreferrer 속성을 사용해 이를 비활성화할 수 있다.

<a href="https://example.com" target="_blank" rel="noopener">Open Link</a>

 

# window.location

: 페이지 새로고침

window.location.reload()

 

# window.navigator

사용 예시 ) 특정 text를 복사하는 코드 작성

const textToCopy = "이것은 복사될 텍스트입니다!";

navigator.clipboard.writeText(textToCopy)

 

# window.console

- 자바스크립트에서 디버깅을 위한 다양한 메서드를 제공하는 내장 객체

- 특정 정보, 메시지, 객체 등을 출력하거나 디버깅을 돕는 데 사용된다.

console.log() // 일반 메시지를 콘솔에 출력
console.error() // 오류 메시지를 출력
console.warn() // 경고 메시지를 출력
console.dir() // 주어진 객체를 상호작용 가능한 트리 구조로 출력 (객체의 속성이나 메서드 탐색 가능)

 

# window.history.pushState()

- 브라우저의 History API의 한 메서드

- 브라우저의 세션 기록을 조작하고 현재 페이지의 URL을 변경하는 데 사용된다.

- SPA 에서 많이 활용된다

 

[ 기능 ]

1. 브라우저 주소(URL) 변경 : 사용자가 페이지를 새로고침하거나 서버 요청을 하지 않고 URL을 변경할 수 있다.

2. 상태(state) 저장 : URL 변경과 함께 상태 데이터를 저장할 수 있다.

3. 브라우저 기록(history) 추가 : 변경된 URL이 브라우저의 방문 기록에 추가된다.

 

사용 방법 )

window.history.pushState(stateObject, title, url);

// 현재 URL: https://example.com/home
window.history.pushState({ page: 1 }, "title 1", "/about");

// 브라우저 주소창: https://example.com/about

 

- stateObject : 새로운 상태 객체, 현재 URL과 관련된 정보를 포함할 수 있다

- title : 새로운 상태의 제목 (title)

- url : 주소 표시줄에 나타날 새로운 URL