Браузерное окружение

JavaScript — это язык. Браузер — это среда, в которой язык работает. В браузере доступны объекты, которых нет в самом JavaScript: window, document, navigator, fetch. Это не часть языка — это API, предоставляемые браузером.

Важно понимать разницу:

JavaScript (ECMAScript) — это язык программирования. Он определяет:

• Переменные (let, const)
• Типы данных (number, string, boolean, object)
• Функции, условия, циклы
• Массивы, объекты, классы

Эти вещи работают ОДИНАКОВО везде: в браузере, в Node.js, в React Native.

Browser APIs — это дополнения браузера:

• window — глобальный объект, окно браузера
• document — доступ к HTML-странице (DOM)
• navigator — информация о браузере
• fetch — загрузка данных по сети
• localStorage — хранение данных
• setTimeout — таймеры

Эти вещи РАБОТАЮТ ТОЛЬКО в браузере. В Node.js их нет.

Глобальный объект window:

• В браузере всё «сверху» принадлежит window
• document === window.document
• console === window.console
• let x = 5; → window.x = 5 (для var)

Спецификации:

• ECMAScript (TC39) — стандарт языка JavaScript
• DOM (WHATWG/W3C) — стандарт для работы со страницей
• HTML (WHATWG) — стандарт разметки

JavaScript — как английский язык. Браузер — как Англия. В Англии доступны дополнительные слова (сленг, местные выражения), которых нет в учебнике английского. document, window, fetch — это «местные слова» браузера.

**Самый простой:**

// JavaScript (работает везде):
const name = 'Анна';
console.log(typeof name); // 'string'

// Browser API (только в браузере):
console.log(window.location.href); // URL страницы
console.log(navigator.userAgent); // Информация о браузере

typeof и console — это JavaScript. window.location и navigator — это Browser API.

**Простой:**

// window — глобальный объект
console.log(window === globalThis); // true

// document — доступ к странице
console.log(document.title); // Заголовок страницы
console.log(document.URL);   // URL страницы

// navigator — информация о браузере
console.log(navigator.language); // 'ru-RU'

window, document, navigator — три основных объекта браузерного окружения.

**Реальный пример:**

// Проверка: работает ли в браузере или в Node.js
if (typeof window !== 'undefined') {
  console.log('Мы в браузере!');
  console.log('URL:', window.location.href);
} else {
  console.log('Мы в Node.js');
}

// Проверка поддержки API
if ('fetch' in window) {
  console.log('fetch доступен');
} else {
  console.log('fetch не поддерживается');
}

Полезные проверки для кода, который может работать в разных средах.

**Неправильно:** Думать, что DOM — часть JavaScript

**Почему:** DOM — это API браузера, не часть ECMAScript. В Node.js нет document.querySelector().

**Правильно:** JavaScript — язык. DOM — API браузера для работы со страницей.

**Неправильно:** Считать window.document и document разными вещами

**Почему:** document — это сокращение для window.document. Они указывают на один объект.

**Правильно:** document === window.document. Используйте document (короче).

**Неправильно:** Использовать var без осознания window

**Почему:** var объявляет переменную в window: var x = 5 → window.x = 5. let/const — нет.

**Правильно:** Используйте let/const. var создаёт свойство на window — этого лучше избегать.

• JavaScript — язык (ECMAScript). DOM — API браузера.
• window — глобальный объект браузера
• document — доступ к HTML-странице
• navigator — информация о браузере
• Browser API работают только в браузере, не в Node.js

Назад: Вы знаете JavaScript Core (J0-J26) — теперь вы узнаёте, что добавляет поверх браузер.

Вперёд: Следующий урок (D2) объясняет, как HTML превращается в DOM-дерево, с которым может работать JavaScript.

• MDN: введение в DOM