lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

lesson15Title

lesson16Title

lesson17Title

webIntroJsChapter4Title

webIntroJsChapter1Title

webIntroJsChapter2Title

webIntroJsChapter3Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />
    <title>Window 객체 예제</title>
  </head>
  <body>
    <button id="showAlert">경고 메시지 표시</button>
    <button id="askName">이름 묻기</button>
    <button id="showTimeoutAlert">2초 후 알림</button>
  </body>
</html>

// showAlert 버튼 클릭 시 경고창 표시
document.getElementById('showAlert').addEventListener('click', function () {
  alert('안녕하세요!');
});

// askName 버튼 클릭 시 이름 묻기
document.getElementById('askName').addEventListener('click', function () {
  const name = prompt('메시지');
  if (name) {
    alert('안녕하세요, ' + name + '님!');
  }
});

// showTimeoutAlert 버튼 클릭 시 2초 후 알림
document
  .getElementById('showTimeoutAlert')
  // 클릭 이벤트 리스너
  .addEventListener('click', function () { 
    // setTimeout 함수를 사용하여 2초 후에 알림창을 표시
    setTimeout(() => {
      alert('2초가 지났어요!');
    }, 2000); // 2000은 2초를 의미
  });

# 브라우저 윈도우(Window) 객체

웹 브라우저의 창 또는 탭을 대표하는 `Window` 객체는 웹 페이지의 가장 상위에 있는 객체이며, 웹 페이지와 상호 작용하는 데 필요한 여러 기능을 제공합니다.

Window 객체는 웹 브라우저의 창을 의미하며, 여러 내장 객체와 함수, 변수 등을 포함하고 있습니다.

웹 페이지의 문서를 의미하는 `document` 객체도 Window 객체의 속성 중 하나입니다.

<br />

## window 주요 메서드

1. `alert()`: 경고 메시지를 표시하는 대화상자를 띄웁니다.

```javascript title="alert 메서드"
window.alert('안녕하세요!'); // "안녕하세요!"라는 경고 메시지가 뜨게 됩니다.
```

<br />

2. `prompt()`: 사용자에게 텍스트 입력을 요청하는 대화상자를 띄웁니다.

```javascript title="prompt 메서드"
let name = window.prompt('이름을 입력해주세요.'); // 사용자가 입력한 이름이 name 변수에 저장됩니다.
```

<br />

3. `setTimeout()`: 지정된 시간이 경과한 후에 함수를 실행합니다.

```javascript title="setTimeout 메서드"
window.setTimeout(() => {
  alert('2초가 지났어요!');
}, 2000); // 2초 후에 "5초가 지났어요!"라는 경고 메시지가 뜨게 됩니다.
```

<br />

4. `location`: 현재 창의 URL에 관한 정보와 메서드를 포함한 객체입니다.

```javascript title="location 객체"
console.log(window.location.href); // 현재 페이지의 URL을 출력합니다.
```

<br />

## 주의할 점

`Window` 객체의 메서드나 속성을 사용할 때, 대부분의 경우 `window.` 접두어를 생략할 수 있습니다. 예를 들어 `alert("안녕하세요!")`와 같이 짧게 표현할 수 있습니다.