diff --git a/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/task.md b/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/task.md
index 4cdf231b0..05a977e3e 100644
--- a/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/task.md
+++ b/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/task.md
@@ -2,19 +2,19 @@ importance: 5
---
-# Get the attribute
+# Отримайте атрибут
-Write the code to select the element with `data-widget-name` attribute from the document and to read its value.
+Напишіть код, щоб вибрати елемент з атрибутом `data-widget-name` з документа та прочитати його значення.
```html run
-
Choose the genre
+
Виберіть жанр
diff --git a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.md b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.md
index 726be4c8f..73fbd7532 100644
--- a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.md
+++ b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.md
@@ -1,9 +1,9 @@
-First, we need to find all external references.
+По-перше, нам потрібно знайти всі зовнішні посилання.
-There are two ways.
+Є два способи.
-The first is to find all links using `document.querySelectorAll('a')` and then filter out what we need:
+Перше -- знайти всі посилання, використовуючи `document.querySelectorAll('a')`, а потім відфільтровувати те, що нам потрібно:
```js
let links = document.querySelectorAll('a');
@@ -12,23 +12,23 @@ for (let link of links) {
*!*
let href = link.getAttribute('href');
*/!*
- if (!href) continue; // no attribute
+ if (!href) continue; // немає атрибуту
- if (!href.includes('://')) continue; // no protocol
+ if (!href.includes('://')) continue; // немає протоколу
- if (href.startsWith('http://internal.com')) continue; // internal
+ if (href.startsWith('http://internal.com')) continue; // внутрішня
link.style.color = 'orange';
}
```
-Please note: we use `link.getAttribute('href')`. Not `link.href`, because we need the value from HTML.
+Будь ласка, зверніть увагу: ми використовуємо `link.getAttribute('href')`. Не `link.href` тому, що нам потрібна властивість з HTML.
-...Another, simpler way would be to add the checks to CSS selector:
+...Інший, простий спосіб полягає в тому, щоб додати перевірки до селектора CSS:
```js
-// look for all links that have :// in href
-// but href doesn't start with http://internal.com
+// шукати всі посилання, які мають :// у href
+// але href не починається з http://internal.com
let selector = 'a[href*="://"]:not([href^="http://internal.com"])';
let links = document.querySelectorAll(selector);
diff --git a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.view/index.html b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.view/index.html
index 4209a5f34..58a8515cc 100644
--- a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.view/index.html
+++ b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.view/index.html
@@ -2,7 +2,7 @@
- The list:
+ Список:
diff --git a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/task.md b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/task.md
index b0a8ab7b1..ba33d6a9e 100644
--- a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/task.md
+++ b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/task.md
@@ -2,18 +2,18 @@ importance: 3
---
-# Make external links orange
+# Зробіть зовнішні посилання помаранчевими
-Make all external links orange by altering their `style` property.
+Зробіть всі зовнішні посилання помаранчевими, змінюючи властивість `style`.
-A link is external if:
-- Its `href` has `://` in it
-- But doesn't start with `http://internal.com`.
+Посилання є зовнішнім, якщо:
+- В його `href` є `://`
+- Але не починається з `http://internal.com`.
-Example:
+Приклад:
```html run
-the list
+список
```
-The result should be:
+Результат повинен бути:
[iframe border=1 height=180 src="solution"]
diff --git a/2-ui/1-document/06-dom-attributes-and-properties/article.md b/2-ui/1-document/06-dom-attributes-and-properties/article.md
index e39a54256..3164e4d93 100644
--- a/2-ui/1-document/06-dom-attributes-and-properties/article.md
+++ b/2-ui/1-document/06-dom-attributes-and-properties/article.md
@@ -1,74 +1,74 @@
-# Attributes and properties
+# Атрибути та властивості
-When the browser loads the page, it "reads" (another word: "parses") the HTML and generates DOM objects from it. For element nodes, most standard HTML attributes automatically become properties of DOM objects.
+Коли браузер завантажує сторінку, він "читає" (іншими словами: "парсить") HTML і генерує об’єкти з нього. Для вузлів-елементів, найбільш стандартні атрибути HTML автоматично стають властивостями об’єктів DOM.
-For instance, if the tag is ``, then the DOM object has `body.id="page"`.
+Наприклад, якщо тег є ``, то об’єкт DOM має `body.id="page"`.
-But the attribute-property mapping is not one-to-one! In this chapter we'll pay attention to separate these two notions, to see how to work with them, when they are the same, and when they are different.
+Але представлення атрибутів через власності не відбувається один в один! У цьому розділі ми звернемо увагу на те, що слід відокремити ці два поняття, щоб побачити, як працювати з ними, коли вони однакові, і коли вони різні.
-## DOM properties
+## DOM властивості
-We've already seen built-in DOM properties. There are a lot. But technically no one limits us, and if there aren't enough, we can add our own.
+Ми вже бачили вбудовані властивості DOM. Їх багато. Але технічно ніхто не обмежує нас, і якщо цього недостатньо, то ми можемо додати наші власні.
-DOM nodes are regular JavaScript objects. We can alter them.
+DOM вузли є звичайними об’єктами JavaScript. Ми можемо змінити їх.
-For instance, let's create a new property in `document.body`:
+Наприклад, створімо нову властивість `document.body`:
```js run
document.body.myData = {
- name: 'Caesar',
- title: 'Imperator'
+ name: 'Цезар',
+ title: 'Імператор'
};
-alert(document.body.myData.title); // Imperator
+alert(document.body.myData.title); // Імператор
```
-We can add a method as well:
+Ми також можемо додати спосіб:
```js run
document.body.sayTagName = function() {
alert(this.tagName);
};
-document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)
+document.body.sayTagName(); // BODY (значення "this" У методі є document.body)
```
-We can also modify built-in prototypes like `Element.prototype` and add new methods to all elements:
+Ми також можемо змінювати вбудовані прототипи, такі як `Element.prototype` і додати нові методи для всіх елементів:
```js run
Element.prototype.sayHi = function() {
- alert(`Hello, I'm ${this.tagName}`);
+ alert(`Привіт, Я ${this.tagName}`);
};
-document.documentElement.sayHi(); // Hello, I'm HTML
-document.body.sayHi(); // Hello, I'm BODY
+document.documentElement.sayHi(); // Привіт, Я HTML
+document.body.sayHi(); // Привіт, Я BODY
```
-So, DOM properties and methods behave just like those of regular JavaScript objects:
+Отже, властивості та методи DOM поводяться у звичайних об’єктах JavaScript:
-- They can have any value.
-- They are case-sensitive (write `elem.nodeType`, not `elem.NoDeTyPe`).
+- Вони можуть мати будь-яке значення.
+- Вони чутливі до регістру (пишіть `elem.nodeType`, не `elem.NoDeTyPe`).
-## HTML attributes
+## HTML атрибути
-In HTML, tags may have attributes. When the browser parses the HTML to create DOM objects for tags, it recognizes *standard* attributes and creates DOM properties from them.
+У HTML, теги можуть мати атрибути. Коли браузер аналізує HTML для створення об’єктів DOM для тегів, він розпізнає *стандартні* атрибути та створює властивості в DOM.
-So when an element has `id` or another *standard* attribute, the corresponding property gets created. But that doesn't happen if the attribute is non-standard.
+Отже, коли елемент має `id` або інший *стандартний* атрибут, створюється відповідна властивість. Але це не відбувається, якщо атрибут нестандартний.
-For instance:
+Наприклад:
```html run
```
-Please note that a standard attribute for one element can be unknown for another one. For instance, `"type"` is standard for `` ([HTMLInputElement](https://html.spec.whatwg.org/#htmlinputelement)), but not for `` ([HTMLBodyElement](https://html.spec.whatwg.org/#htmlbodyelement)). Standard attributes are described in the specification for the corresponding element class.
+Зверніть увагу, що стандартний атрибут для одного елемента може бути невідомим для іншого. Наприклад, `"type"` -- це стандартний для `` ([HTMLInputElement](https://html.spec.whatwg.org/#htmlinputelement)), але не для `` ([HTMLBodyElement](https://html.spec.whatwg.org/#htmlbodyelement)). Стандартні атрибути описані у специфікації для відповідного класу елемента.
Here we can see it:
```html run
@@ -77,74 +77,74 @@ Here we can see it:
```
-So, if an attribute is non-standard, there won't be a DOM-property for it. Is there a way to access such attributes?
+Отже, якщо атрибут є нестандартним, то для нього не буде DOM властивості. Чи є спосіб доступу до таких атрибутів?
-Sure. All attributes are accessible by using the following methods:
+Звичайно. Всі атрибути доступні за допомогою наступних методів:
-- `elem.hasAttribute(name)` -- checks for existence.
-- `elem.getAttribute(name)` -- gets the value.
-- `elem.setAttribute(name, value)` -- sets the value.
-- `elem.removeAttribute(name)` -- removes the attribute.
+- `elem.hasAttribute(name)` -- перевіряє наявність.
+- `elem.getAttribute(name)` -- отримує значення.
+- `elem.setAttribute(name, value)` -- встановлює значення.
+- `elem.removeAttribute(name)` -- видаляє атрибут.
-These methods operate exactly with what's written in HTML.
+Ці методи працюють саме з тим, що написано в HTML.
-Also one can read all attributes using `elem.attributes`: a collection of objects that belong to a built-in [Attr](https://dom.spec.whatwg.org/#attr) class, with `name` and `value` properties.
+Також можна прочитати всі атрибути, використовуючи `elem.attributes`: колекція об’єктів, що належать до вбудованого [Attr](https://dom.spec.whatwg.org/#attr), з `name` і `value` властивості.
-Here's a demo of reading a non-standard property:
+Ось демонстрація читання нестандартної власності:
```html run
```
-HTML attributes have the following features:
+Атрибути HTML мають такі функції:
-- Their name is case-insensitive (`id` is same as `ID`).
-- Their values are always strings.
+- Їх назва нечутлива до регістру (`id` -- це те саме, що й `id`).
+- Їхні значення завжди є рядками.
-Here's an extended demo of working with attributes:
+Ось розширена демонстрація роботи з атрибутами:
```html run
```
-Please note:
+Будь ласка, зверніть увагу:
-1. `getAttribute('About')` -- the first letter is uppercase here, and in HTML it's all lowercase. But that doesn't matter: attribute names are case-insensitive.
-2. We can assign anything to an attribute, but it becomes a string. So here we have `"123"` as the value.
-3. All attributes including ones that we set are visible in `outerHTML`.
-4. The `attributes` collection is iterable and has all the attributes of the element (standard and non-standard) as objects with `name` and `value` properties.
+1. `getAttribute('About')` -- перша буква тут є великою, а в HTML це всі з малої літери. Але це не має значення: імена атрибутів -- нечутливі до регістру.
+2. Ми можемо призначити будь-що атрибуту, але це стане рядком. Отже, ми маємо `"123"` як значення.
+3. Всі атрибути, включаючи ті, які ми встановлюємо, видно в `outerHTML`.
+4. Колекція `attributes` є ітерованою і має всі атрибути елемента (стандартні та нестандартні) як об’єкти з `name` і `value` властивостями.
-## Property-attribute synchronization
+## Синхронізація властивостей і атрибутів
-When a standard attribute changes, the corresponding property is auto-updated, and (with some exceptions) vice versa.
+Коли стандартний атрибут змінюється, відповідна властивість автоматично оновлюється і (з деякими винятками) навпаки.
-In the example below `id` is modified as an attribute, and we can see the property changed too. And then the same backwards:
+У наведеному нижче прикладі `id` модифікується як атрибут, і ми також можемо побачити зміну властивості. А потім те ж саме навпаки:
```html run
@@ -152,17 +152,17 @@ In the example below `id` is modified as an attribute, and we can see the proper
```
-But there are exclusions, for instance `input.value` synchronizes only from attribute -> to property, but not back:
+Але є винятки, наприклад, `input.value` синхронізує лише з атрибуту -> до властивості, але не назад:
```html run
@@ -170,41 +170,41 @@ But there are exclusions, for instance `input.value` synchronizes only from attr
```
-In the example above:
-- Changing the attribute `value` updates the property.
-- But the property change does not affect the attribute.
+У прикладі вище:
+- Зміна атрибута `value` оновлює властивість.
+- Але зміна властивості не впливає на атрибут.
-That "feature" may actually come in handy, because the user actions may lead to `value` changes, and then after them, if we want to recover the "original" value from HTML, it's in the attribute.
+Ця "особливість" може стати в нагоді, оскільки дії користувача можуть призвести до змін `value`, а потім після них, якщо ми хочемо відновити "оригінальне" значення з HTML, то воно є в атрибуті.
-## DOM properties are typed
+## Властивості DOM типізовані
-DOM properties are not always strings. For instance, the `input.checked` property (for checkboxes) is a boolean:
+Властивості DOM не завжди є рядками. Наприклад, властивість `input.checked` (для чекбоксів) має бульовий тип:
```html run
- checkbox
+ чекбокс
```
-There are other examples. The `style` attribute is a string, but the `style` property is an object:
+Є й інші приклади. Атрибут `style` -- це рядок, але властивість `style` є об’єктом:
```html run
-
Hello
+
Привіт
```
-Most properties are strings though.
+Більшість властивостей є рядками.
-Quite rarely, even if a DOM property type is a string, it may differ from the attribute. For instance, the `href` DOM property is always a *full* URL, even if the attribute contains a relative URL or just a `#hash`.
+Досить рідко, властивість в DOM може відрізнятися від атрибута, навіть якщо тип властивості в DOM -- це рядок. Наприклад, властивість `href` DOM завжди є *повним* URL, навіть якщо атрибут містить відносну URL-адресу або просто `#hash`.
-Here's an example:
+Ось приклад:
```html height=30 run
-link
+посилання
```
-If we need the value of `href` or any other attribute exactly as written in the HTML, we can use `getAttribute`.
+Якщо нам потрібна властивість `href` або будь-якого іншого атрибуту саме так, як написано в HTML, ми можемо використовувати `getAttribute`.
-## Non-standard attributes, dataset
+## Нестандартні атрибути, dataset
-When writing HTML, we use a lot of standard attributes. But what about non-standard, custom ones? First, let's see whether they are useful or not? What for?
+При написанні HTML ми використовуємо багато стандартних атрибутів. Але як щодо нестандартних, користувацьких? По-перше, подивімося, чи вони корисні чи ні? І для чого?
-Sometimes non-standard attributes are used to pass custom data from HTML to JavaScript, or to "mark" HTML-elements for JavaScript.
+Іноді нестандартні атрибути використовуються для передачі користувацьких даних з HTML до JavaScript, або для "позначки" HTML-елементів для JavaScript.
-Like this:
+Наприклад:
```html run
-
+
-
+
```
-Also they can be used to style an element.
+Також вони можуть бути використані для стилізації елемента.
-For instance, here for the order state the attribute `order-state` is used:
+Наприклад, тут для замовлення використовується атрибут `order-state`:
```html run
- A new order.
+ Нове замовлення.
- A pending order.
+ Замовлення очікується.
- A canceled order.
+ Скасоване замовлення.
```
-Why would using an attribute be preferable to having classes like `.order-state-new`, `.order-state-pending`, `.order-state-canceled`?
+Чому б використовувати атрибут краще ніж мати класи `.order-state-new`, `.order-state-pending`, `.order-state-canceled`?
-Because an attribute is more convenient to manage. The state can be changed as easy as:
+Оскільки атрибут більш зручний для управління. Стан може бути легко змінено, наприклад:
```js
-// a bit simpler than removing old/adding a new class
+// трохи простіше, ніж видалення старого/додавання нового класу
div.setAttribute('order-state', 'canceled');
```
-But there may be a possible problem with custom attributes. What if we use a non-standard attribute for our purposes and later the standard introduces it and makes it do something? The HTML language is alive, it grows, and more attributes appear to suit the needs of developers. There may be unexpected effects in such case.
+Але може виникнути потенційна проблема з користувацькими атрибутами. Що робити, якщо ми використовуємо нестандартний атрибут для наших цілей, а пізніше він з’являється в стандарті і виконує якусь функцію? Мова HTML жива, вона зростає, а також з’являється більше атрибутів, які відповідають потребам розробників. У такому випадку можуть бути несподівані ефекти.
-To avoid conflicts, there exist [data-*](https://html.spec.whatwg.org/#embedding-custom-non-visible-data-with-the-data-*-attributes) attributes.
+Щоб уникнути конфліктів, існують [data-*](https://html.spec.whatwg.org/#embedding-custom-non-visible-data-with-the-data-*-attributes) атрибути.
-**All attributes starting with "data-" are reserved for programmers' use. They are available in the `dataset` property.**
+**Всі атрибути, які починаються з "data-" зарезервовані для використання програмістами. Вони доступні у властивості `dataset`.**
-For instance, if an `elem` has an attribute named `"data-about"`, it's available as `elem.dataset.about`.
+Наприклад, якщо `elem` має атрибут, що називається `"data-about"`, то він доступний як `elem.dataset.about`.
-Like this:
+Наприклад:
```html run
@@ -324,9 +324,9 @@ Like this:
```
-Multiword attributes like `data-order-state` become camel-cased: `dataset.orderState`.
+Атрибути, що складаються з декількох слів, такі як `data-order-state` стають записані за допомогою верблюжої нотації (camel-case): `dataset.orderState`.
-Here's a rewritten "order state" example:
+Ось приклад переписаного "order state":
```html run