▶ JavaScript Browser BOM

JavaScript Window

JavaScript Window: 브라우저 창과 관련된 기능

JavaScript Window 객체는 웹 브라우저의 창을 나타내며, 브라우저에서 제공하는 다양한 기능과 속성에 접근할 수 있게 해줍니다. Window 객체는 전역 객체이며, 페이지에 로드된 모든 JavaScript 코드와 관련된 메서드와 속성을 포함합니다. 이 가이드는 JavaScript에서 Window 객체를 사용하는 방법과 관련된 주요 기능에 대해 설명합니다.

1. Window 객체란?

Window 객체는 브라우저의 기본 창을 나타내며, HTML 문서와 상호작용하는 데 필요한 여러 기능을 제공합니다. 이 객체는 브라우저와의 상호작용을 처리하며, 사용자 인터페이스를 조작할 수 있는 방법을 제공합니다.

1.1. Window 객체의 주요 속성

window.document: 현재 페이지의 Document 객체에 접근합니다.
window.location: 현재 문서의 URL 정보를 포함하며, 페이지를 이동할 수 있습니다.
window.history: 사용자의 브라우저 세션에서 방문한 URL의 기록을 포함합니다.
window.alert(): 경고 대화 상자를 표시하는 메서드입니다.
window.setTimeout(): 지정된 시간 후에 함수를 실행합니다.

2. Window 객체 속성 및 메서드

이제 Window 객체의 주요 속성과 메서드에 대해 살펴보겠습니다.

2.1. `window.document`

현재 문서에 대한 참조로, DOM을 조작하는 데 사용됩니다.

console.log(window.document.title);  // 현재 문서의 제목 출력

2.2. `window.location`

현재 문서의 URL을 나타내며, 페이지를 이동하는 데 사용됩니다.

// 현재 URL 출력
console.log(window.location.href);

// 다른 URL로 이동
window.location.href = '<https://www.example.com>';

2.3. `window.history`

브라우저의 방문 기록에 접근할 수 있게 해주는 객체입니다. 사용자가 이전 페이지로 돌아가거나 앞으로 나아갈 수 있게 합니다.

// 이전 페이지로 이동
window.history.back();

// 다음 페이지로 이동
window.history.forward();

2.4. `window.alert()`

간단한 경고 대화 상자를 표시하는 메서드입니다.

window.alert('This is an alert message!');  // 경고 대화 상자 표시

2.5. `window.setTimeout()`

지정된 시간 후에 함수를 실행하는 메서드입니다. 주로 타이머를 설정하는 데 사용됩니다.

setTimeout(() => {
    console.log('This message is shown after 3 seconds.');
}, 3000);  // 3000 밀리초 후에 메시지 출력

2.6. `window.setInterval()`

지정된 시간 간격으로 반복 실행되는 타이머를 설정합니다.

let count = 0;
const intervalId = setInterval(() => {
    count++;
    console.log(`Count: ${count}`);
    if (count >= 5) {
        clearInterval(intervalId);  // 5회 실행 후 타이머 중지
    }
}, 1000);  // 1000 밀리초(1초)마다 실행

3. Window 객체 이벤트

Window 객체는 다양한 이벤트를 처리할 수 있습니다. 예를 들어, 페이지 로드, 크기 조정, 키 입력 등의 이벤트를 감지할 수 있습니다.

3.1. `load` 이벤트

페이지가 완전히 로드되었을 때 발생하는 이벤트입니다.

window.addEventListener('load', () => {
    console.log('Page is fully loaded.');
});

3.2. `resize` 이벤트

브라우저 창의 크기가 변경될 때 발생하는 이벤트입니다.

window.addEventListener('resize', () => {
    console.log('Window resized to:', window.innerWidth, 'x', window.innerHeight);
});

3.3. `scroll` 이벤트

페이지가 스크롤될 때 발생하는 이벤트입니다.

window.addEventListener('scroll', () => {
    console.log('Scrolled to:', window.scrollY);  // 수직 스크롤 위치 출력
});

4. Window 객체와 브라우저

Window 객체는 브라우저와 관련된 많은 기능을 포함하고 있습니다. 예를 들어, 팝업 창을 생성하거나 새 탭을 열 수 있습니다.

4.1. 새 팝업 창 열기

const newWindow = window.open('<https://www.example.com>', '_blank', 'width=600,height=400');

이 코드는 새로운 팝업 창을 열어 지정된 URL을 표시합니다.

4.2. 창 닫기

newWindow.close();  // 팝업 창 닫기

5. Window 객체 속성과 메서드 요약

window.document: 현재 문서에 대한 참조.
window.location: 현재 URL 및 페이지 이동 기능.
window.history: 브라우저 방문 기록 접근.
window.alert(): 경고 대화 상자 표시.
window.setTimeout(): 지정된 시간 후에 함수 실행.
window.setInterval(): 주기적으로 함수 실행.
이벤트 리스너: load, resize, scroll 이벤트 처리.

요약

JavaScript Window 객체는 웹 브라우저와 상호작용하는 데 필요한 다양한 기능과 속성을 제공합니다. 이를 통해 사용자는 웹 페이지의 URL을 조작하고, 사용자 인터페이스를 관리하며, 이벤트를 처리할 수 있습니다.

Window 객체를 통해 DOM과 상호작용하고 브라우저의 다양한 기능을 활용할 수 있습니다.
페이지 로드, 크기 조정, 스크롤 등의 이벤트를 감지하여 동적인 웹 페이지를 구현할 수 있습니다.
팝업 창을 열거나, URL을 변경하는 등의 작업을 통해 사용자의 경험을 향상시킬 수 있습니다.

JavaScript의 Window 객체를 활용하여 매력적이고 동적인 웹 애플리케이션을 개발할 수 있습니다.

코딩 스쿨 JavaScript