From a106439c5ac33f8231aef9777c41129e5e711af9 Mon Sep 17 00:00:00 2001 From: Mykola Sopiha Date: Wed, 19 Jan 2022 01:56:28 +0200 Subject: [PATCH 1/3] dom-attributes-and-properties --- .../article.md | 100 +++++++++--------- 1 file changed, 50 insertions(+), 50 deletions(-) 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..7dfcac570 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. +Дом вузли є звичайними об'єктами 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,68 +77,68 @@ 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 From d132b78da8537991ff1c0a94c483c71a58000213 Mon Sep 17 00:00:00 2001 From: Mykola Sopiha Date: Wed, 19 Jan 2022 22:31:17 +0200 Subject: [PATCH 2/3] dom-attributes-and-properties --- .../1-get-user-attribute/solution.md | 8 +- .../1-get-user-attribute/task.md | 8 +- .../2-yellow-links/solution.md | 20 +- .../2-yellow-links/solution.view/index.html | 2 +- .../2-yellow-links/source.view/index.html | 4 +- .../2-yellow-links/task.md | 18 +- .../article.md | 173 +++++++++--------- 7 files changed, 117 insertions(+), 116 deletions(-) diff --git a/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/solution.md b/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/solution.md index 0507832f3..d8cab6006 100644 --- a/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/solution.md +++ b/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/solution.md @@ -4,15 +4,15 @@ -
Choose the genre
+
Виберіть жанр
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: + Список: