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

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

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

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

Контент

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

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

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

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

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

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

## Теорія

### TL;DR
- `window`, це об'єкт поточного вікна або вкладки браузера.
- Він містить `document`, тобто DOM-дерево сторінки.
- Він містить методи керування вікном: відкриття, закриття, прокручування.
- Він містить таймери `setTimeout` і `setInterval`.
- Він містить браузерні API: `localStorage`, `sessionStorage`, `history`, `location`, `navigator`, `console`.
- Глобальні `var`-змінні стають властивостями `window`, а `let` і `const`, ні.
- `window`, це все оточення вкладки, а `document`, лише вміст сторінки.

### Швидкий приклад
```javascript
console.log(window.document);      // access to the DOM
console.log(window.location.href); // the page URL
console.log(window.innerWidth);    // browser viewport width
```

> У браузері майже все «живе» всередині `window`.

### Що таке `window`
`window`, це об'єкт, який описує поточне вікно браузера. Усередині нього зібрано:

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

### `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
```

Вони потрапляють до окремого лексичного запису глобальної області, тому доступні за іменем, але не як властивість `window`.

### Основні властивості та об'єкти всередині `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()` | Прокручування сторінки |

### Практичні приклади

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

```javascript
console.log(window.location.href);            // https://example.com
window.location.href = "https://example.org"; // go to another site
```

Таймери:

```javascript
window.setTimeout(() => {
  console.log("2 seconds have passed");
}, 2000);
```

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

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

Сховище:

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

Схематично взаємозв'язки виглядають так:

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

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

### Типові помилки
- Вважати, що `window` є і в Node.js. Там глобального `window` немає, його роль виконує `global` або універсальний `globalThis`.
- Очікувати, що `let` і `const` з'являться у `window`. Вони не стають його властивостями, на відміну від `var`.
- Плутати `window` і `document`: `document`, це лише одна з властивостей `window`, дерево елементів сторінки.
- Створювати глобальну змінну з іменем, яке вже зайняте у `window` (наприклад `name`, `top`, `length`, `status`), і потім дивуватися дивній поведінці.
- Читати `window.innerWidth` як ширину екрана. Це ширина області перегляду; ширина екрана, це `screen.width`.

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

Для рев’юера

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

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