Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке window?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

об'єкт `window` - це **глобальний об'єкт браузера**,
який представляє **вікно вкладки**, у якому виконується JavaScript.

Він є **кореневим об'єктом для всього браузерного середовища**,
і через нього доступні всі глобальні змінні, функції та сам `document`.

---

## 1. Що таке `window`

`window` - це об'єкт, який **описує поточне вікно браузера**
і містить:

- саму **веб-сторінку** (`document`),
- **методи керування вікном** (відкриття, закриття, прокручування тощо),
- **таймери** (`setTimeout`, `setInterval`),
- **API браузера** (localStorage, history, location та ін.),
- **усі глобальні змінні** (наприклад, оголошені через `var`).

---

## 2. Приклад:

```javascript
console.log(window.document); // доступ до DOM
console.log(window.location.href); // URL сторінки
console.log(window.innerWidth); // ширина вікна браузера
```

> Насправді у браузері **майже все "живе" всередині** `window`.

---

## 3. `window` - це глобальний об'єкт

Коли ти пишеш:

```javascript
alert("Привіт");
```

це те саме, що:

```javascript
window.alert("Привіт");
```

Майже всі глобальні функції та властивості насправді належать `window`.
Те саме стосується змінних, оголошених через `var`:

```javascript
var x = 10;
console.log(window.x); // 10
```

Але - змінні через `let` і `const` **не додаються до window**:

```javascript
let y = 5;
console.log(window.y); // undefined
```

---

## 4. Основні властивості та об'єкти всередині `window`

| Властивість / Об'єкт | Що робить |
|---|---|
| `window.document` | HTML-документ (DOM-дерево) |
| `window.location` | Інформація про URL і методи навігації |
| `window.history` | Історія переходів |
| `window.navigator` | Інформація про браузер і систему |
| `window.localStorage` | Постійне сховище даних |
| `window.sessionStorage` | Тимчасове сховище для сесії |
| `window.console` | Доступ до консолі (`console.log`) |
| `window.alert()`, `confirm()`, `prompt()` | Діалогові вікна |
| `window.setTimeout()` / `setInterval()` | Таймери |
| `window.innerWidth`, `window.innerHeight` | Розміри області перегляду |
| `window.scrollTo()`, `window.scrollBy()` | Прокручування сторінки |

---

## 5. Приклади:

### Керування навігацією:

```javascript
console.log(window.location.href); // https://example.com
window.location.href = "https://example.org"; // перейти на інший сайт
```

---

### Таймери:

```javascript
window.setTimeout(() => {
  console.log("Минуло 2 секунди");
}, 2000);
```

---

### Прокручування сторінки:

```javascript
window.scrollTo({ top: 0, behavior: "smooth" });
```

---

### Сховище:

```javascript
window.localStorage.setItem("theme", "dark");
console.log(window.localStorage.getItem("theme")); // "dark"
```

---

## 6. Взаємозв'язок:

```javascript
window
 ├── document   -> HTML-документ (DOM)
 ├── location   -> URL і навігація
 ├── history    -> історія переходів
 ├── navigator  -> інформація про браузер
 ├── localStorage / sessionStorage -> сховище
 ├── console
 ├── timers (setTimeout, setInterval)
 └── ... і багато чого іншого
```

---

## 7. Ключова відмінність від `document`:

| Властивість | `window` | `document` |
|---|---|---|
| Що представляє | Вкладку браузера (вікно) | Вміст сторінки (DOM) |
| Глобальний об'єкт | Так | Ні |
| Містить | Все середовище (DOM, таймери, API) | Тільки дерево елементів HTML |
| Приклад | `window.innerWidth` | `document.body` |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати438 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.