Skip to content

Browser environment, specs #243

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tarasyyyk merged 2 commits into from
Dec 27, 2021
Merged

Browser environment, specs #243

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d2ed119
browser-environment
MykolaSopiha Dec 26, 2021
63f2c5a
Apply suggestions from code review
tarasyyyk Dec 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Apply suggestions from code review
  • Loading branch information
@tarasyyyk
tarasyyyk authored Dec 27, 2021
commit 63f2c5ad7b4c8ce57fb1d14e184f7b214a49eb73
28 changes: 14 additions & 14 deletions 2-ui/1-document/01-browser-environment/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# Браузерне середовище, специфікації

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

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

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

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

Expand Down Expand Up @@ -58,9 +58,9 @@ setTimeout(() => document.body.style.background = "", 1000);
```

```smart header="CSSOM для стилю"
Також є окрема специфікація, [CSS Object Model (CSSOM)](https://www.w3.org/tr/cssomom-1/) для правил CSS та таблиць стилів, що пояснює, як стилі повинні бути представлені у вигляді об’єктів, як читати та писати їх.
Також є окрема специфікація, [CSS Object Model (CSSOM)](https://www.w3.org/TR/cssom-1/) для правил CSS та таблиць стилів, що пояснює, як стилі повинні бути представлені у вигляді об’єктів, як читати та писати їх.

CSSOM використовується разом з DOM, коли ми змінюємо правила стилів для документа. На практиці, хоча, CSSOM використовується рідко, тому що нам рідко потрібно змінити правила CSS з JavaScript (зазвичай ми просто додаємо/видаляємо CSS-класи, не змінюючи їх CSS правила), але це також можливо.
CSSOM використовується разом з DOM, коли ми змінюємо правила стилів для документа. Хоча на практиці, ми рідко використовуємо CSSOM, тому що рідко змінюємо CSS-правила через JavaScript (зазвичай ми просто додаємо/видаляємо CSS-класи, не змінюючи їх CSS-правила), але це також можливо.
```

## BOM (Browser Object Model)
Expand All @@ -76,38 +76,38 @@ CSSOM використовується разом з DOM, коли ми змін

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

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

```smart header="Специфікації"
BOM -- це частина загальної [HTML-специфікації](https://html.spec.whatwg.org).

Так, ви почули це правильно. Специфікація HTML на <https://html.spec.whatwg.org> -- це не тільки про "HTML-мову" (теги, атрибути), але й охоплює купу об’єктів, методів та браузера, специфічних розширень DOM. Це "HTML у широких умовах". Крім того, деякі частини мають додаткові специфікації, перераховані на <https://spec.whatwg.org>.
Так, ви правильно почули. Специфікація HTML на <https://html.spec.whatwg.org> -- це не тільки про "мову HTML" (теги, атрибути). Вона також охоплює купу об’єктів, методів та специфічних для браузера розширень DOM. Це "HTML в широкому сенсі". Крім того, деякі частини мають додаткові специфікації, перераховані на <https://spec.whatwg.org>.
```

## Підсумки

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

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

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

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

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

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

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

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

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