Мова програмування JavaScript спочатку була створена для веббраузерів. З того часу вона перетворилась на мову з багатьма варіантами використання та різними платформами.
Платформою може бути браузер, або вебсервер або інший хост, навіть “розумна” кавоварка, якщо вона може запустити JavaScript. Кожна з них забезпечує специфічну для платформи функціональність. Специфікація JavaScript називає це середовищем.
Середовище надає власні об’єкти та додаткові функції до базової мови. Веббраузери дають засоби для керування вебсторінками. Node.js забезпечує функції сервера тощо.
На рисунку нижче показано в загальних рисах те, що ми маємо, коли JavaScript працює в веббраузері:
Є “корінний” об’єкт, що називається window. Він має дві ролі:
- По-перше, це глобальний об’єкт для коду JavaScript, як описано в розділі Глобальний об’єкт.
- По-друге, він являє собою “вікно браузера” та надає способи для керування ним.
Наприклад, тут ми використовуємо його як глобальний об’єкт:
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.
Специфікація DOM описує структуру документа та надає об’єкти, щоб керувати ним. Є також інші інструменти окрім браузерів, які також використовують DOM.
Наприклад, скрипти сервера, які завантажують HTML-сторінки та обробляють їх також можуть використовувати DOM. При цьому вони можуть підтримувати лише частину специфікації.
Також є окрема специфікація, CSS Object Model (CSSOM) для правил CSS та таблиць стилів, що пояснює, як стилі повинні бути представлені у вигляді об’єктів, як читати та писати їх.
CSSOM використовується разом з DOM, коли ми змінюємо правила стилів для документа. Хоча на практиці, ми рідко використовуємо CSSOM, тому що рідко змінюємо CSS-правила через JavaScript (зазвичай ми просто додаємо/видаляємо CSS-класи, не змінюючи їх CSS-правила), але це також можливо.
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: вони безпосередньо не пов’язані з документом, але являють собою чисті методи взаємодії з користувачем.
BOM – це частина загальної HTML-специфікації.
Так, ви правильно почули. Специфікація HTML на https://html.spec.whatwg.org – це не тільки про “мову HTML” (теги, атрибути). Вона також охоплює купу об’єктів, методів та специфічних для браузера розширень DOM. Це “HTML в широкому сенсі”. Крім того, деякі частини мають додаткові специфікації, перераховані на https://spec.whatwg.org.
Підсумки
Говорячи про стандарти, ми маємо:
- Специфікацію 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, тому що документ відіграє центральну роль в інтерфейсі користувача.