윈도우 객체

자바 스크립트(java script)/자바 스크립트 기초

윈도우 객체

lamarcK 2025. 3. 20. 18:17

1. 윈도우 객체란?

window 객체는 웹 브라우저의 창(window)을 제어하는 객체다.

OS인 Microsoft Windows 이런게 아니고 브라우저의 window(창)이라는 의미이다.

자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티(속성)가 된다.

예를 들어, var myVar = 10; 이라고 선언하면 window.myVar 로 접근할 수 있다.
function myFunction() { ... } 이라고 선언하면 window.myFunction 으로 호출할 수 있다.

window 객체의 메서드는 전역 함수이며, window 객체의 프로퍼티는 전역 변수가 된다.

문서 객체 모델(DOM)의 요소들도 모두 window 객체의 프로퍼티가 된다.

자바스크립트의 window 객체는 브라우저 환경에서 전역 객체로 사용되며, 다음과 같은 특징과 기능을 가진다.

1. 전역 객체 (Global Object)

window 객체는 브라우저 환경에서 자바스크립트 코드의 최상위 객체이다.
window 객체는 모든 전역 변수와 함수를 포함하며, 별도의 선언 없이도 접근할 수 있다.
예시: window.alert('Hello!') 또는 간단하게 alert('Hello!')

경고창 표시 (alert)

window.alert("경고 메시지!"); // 또는 alert("경고 메시지!");

2. 브라우저 창 제어

window 객체는 브라우저 창 자체를 제어하는 다양한 메서드를 제공한다.
- window.open(): 새 창 열기
- window.close(): 현재 창 닫기
- window.resizeTo(), window.resizeBy(): 창 크기 조절
- window.moveTo(), window.moveBy(): 창 위치 이동

버튼을 누르면 브라우저 창 제어를 할 수 있도록 만든 코드이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="openWindow()">자식 창 열기</button>
    <button onclick="resizeChildWindowTo()">자식 창 크기 조절 (절대값)</button>
    <button onclick="resizeChildWindowBy()">자식 창 크기 조절 (상대값)</button>
    <button onclick="moveChildWindowTo()">자식 창 위치 이동 (절대값)</button>
    <button onclick="moveChildWindowBy()">자식 창 위치 이동 (상대값)</button>

<script src="script.js"></script>
</body>
</html>

let childWindow; // 자식 창 참조 변수

function openWindow() {
  childWindow = window.open('child.html', 'newWindow', 'width=500,height=300');
}

function resizeChildWindowTo() {
  if (childWindow && !childWindow.closed) {
    childWindow.resizeTo(800, 600);
  } else {
    alert('자식 창이 열려있지 않습니다.');
  }
}

function resizeChildWindowBy() {
  if (childWindow && !childWindow.closed) {
    childWindow.resizeBy(100, 50);
  } else {
    alert('자식 창이 열려있지 않습니다.');
  }
}

function moveChildWindowTo() {
  if (childWindow && !childWindow.closed) {
    childWindow.moveTo(100, 100);
  } else {
    alert('자식 창이 열려있지 않습니다.');
  }
}

function moveChildWindowBy() {
  if (childWindow && !childWindow.closed) {
    childWindow.moveBy(50, 50);
  } else {
    alert('자식 창이 열려있지 않습니다.');
  }
}

3. 브라우저 정보 접근

window 객체는 브라우저와 관련된 다양한 정보를 제공한다.
- window.location: 현재 페이지의 URL 정보
- window.history: 브라우저 방문 기록 관리
- window.navigator: 브라우저 및 운영체제 정보
- window.screen: 사용자 화면 정보

4. 타이머 기능

window 객체는 타이머 관련 메서드를 제공하여 특정 시간 간격으로 함수를 실행하거나 지연시킬 수 있다.
- window.setTimeout(): 지정된 시간 후에 함수 실행
- window.setInterval(): 지정된 시간 간격으로 함수 반복 실행
- window.clearTimeout(), window.clearInterval(): 타이머 취소

5. 문서 객체 모델 (DOM) 접근

window 객체는 document 객체를 통해 HTML 문서의 DOM에 접근하고 조작할 수 있도록 한다.
- window.document: 현재 문서의 DOM에 대한 참조

6. 기타 기능

window.alert(), window.confirm(), window.prompt(): 사용자에게 알림, 확인, 입력 대화 상자 표시
window.localStorage, window.sessionStorage: 브라우저에 데이터 저장

window 객체는 브라우저 환경에서만 사용 가능하다

Node.js와 같은 서버 환경에서는 사용할 수 없다.
window 객체의 일부 기능은 보안상의 이유로 사용이 제한될 수 있다.