Браузерне середовище, специфікації

Мова програмування JavaScript спочатку була створена для веббраузерів. З того часу вона перетворилась на мову з багатьма варіантами використання та різними платформами.

Платформою може бути браузер, або вебсервер або інший хост, навіть “розумна” кавоварка, якщо вона може запустити JavaScript. Кожна з них забезпечує специфічну для платформи функціональність. Специфікація JavaScript називає це середовищем.

Середовище надає власні об’єкти та додаткові функції до базової мови. Веббраузери дають засоби для керування вебсторінками. Node.js забезпечує функції сервера тощо.

На рисунку нижче показано в загальних рисах те, що ми маємо, коли JavaScript працює в веббраузері:

Є “корінний” об’єкт, що називається window. Він має дві ролі:

1. По-перше, це глобальний об’єкт для коду JavaScript, як описано в розділі Глобальний об’єкт.
2. По-друге, він являє собою “вікно браузера” та надає способи для керування ним.

Наприклад, тут ми використовуємо його як глобальний об’єкт:

function sayHi() {
  alert("Привіт");
}

// глобальні функції є методами глобального об’єкта:
window.sayHi();

А тут ми використовуємо його як вікно браузера, щоб побачити висоту вікна:

alert(window.innerHeight); // внутрішня висота вікна

Існує набагато більше методів та властивостей об’єкта window, ми їх розглянемо пізніше.

DOM (Document Object Model)

Document Object Model, або скорочено DOM – представляє весь контент сторінки як об’єкти, які можуть бути змінені.

Об’єкт document – це головна “точка входу” до сторінки. Ми можемо змінити або створити що-небудь на сторінці, використовуючи цей об’єкт.

Наприклад

// змінити колір фону на червоний
document.body.style.background = "red";

// повернути його назад після 1 секунди
setTimeout(() => document.body.style.background = "", 1000);

Тут ми використовували document.body.style, але там набагато, набагато більше властивостей. Властивості та методи описані у специфікації: DOM Living Standard.

BOM (Browser Object Model)

Модель об’єкта браузера (Browser Object Model, BOM) – це додаткові об’єкти, надані браузером (хост-середовищем) для роботи з усім, крім документа.

Наприклад:

• Об’єкт navigator забезпечує інформацію про браузер та операційну систему. Існує багато його властивостей, але два найбільш широко відомих: navigator.userAgent – інформація про поточний браузер, та navigator.platform – про платформу (може допомогти визначити на якій платформі відкрито браузер – Windows/Linux/Mac тощо).
• Об’єкт location дозволяє нам прочитати поточну URL-адресу і може перенаправити веббраузер на нову адресу.

Ось як ми можемо використовувати об’єкт location:

alert(location.href); // показує поточний URL-адрес
if (confirm("Перейти на сайт Wikipedia?")) {
  location.href = "https://wikipedia.org"; // перенаправляє браузер на іншу URL-адресу
}

Функції alert/confirm/prompt також є частиною BOM: вони безпосередньо не пов’язані з документом, але являють собою чисті методи взаємодії з користувачем.

Підсумки

Говорячи про стандарти, ми маємо:

Специфікацію DOM

Описує структуру документа, маніпуляції та події, див. https://dom.spec.whatwg.org.

Специфікацію CSSOM

Описує таблиці стилів і правила стилів, маніпуляції з ними і їх зв’язування з документами, див. https://www.w3.org/TR/cssom-1/.

Специфікацію HTML

Описує мову HTML (наприклад, теги), а також BOM (модель об’єкта браузера) – різні функції браузера: setTimeout, alert, location і так далі, див. https://html.spec.whatwg.org. Вона приймає специфікацію DOM та розширює її багатьма додатковими властивостями та методами.

Крім того, деякі класи описуються окремо на https://spec.whatwg.org/.

Буль ласка, збережіть ці посилання, оскільки у них подано багато цікавої інформації для вивчення, яку неможливо цілком розглянути і все запам’ятати.

Коли ви хочете прочитати про властивість або метод, посібник Mozilla за адресою https://developer.mozilla.org/en-US/ також є хорошим ресурсом, але відповідна специфікація може бути навіть кращим ресурсом: вона складніша і її довше читати, але вона зробить ваші знання фундаментальними та повними.

Щоб щось знайти в Інтернеті, часто зручно використовувати пошук в форматі “WHATWG [запит]” або “MDN [запит]”, наприклад, https://google.com?q=whatwg+localstorage, https://google.com?q=mdn+localstorage.

Тепер перейдімо до вивчення DOM, тому що документ відіграє центральну роль в інтерфейсі користувача.